SPDY resource server push 하기

SPDY 를 쓰면 좋은 점이 헤더의 압축, 리소스의 압축 등으로 인해 속도가 빨라진다는 것이다.

그리고 하나 더! 빠른 웹사이트를 기대할 수 있는 점은 바로 server-push 기능이다.

보통 http 에서는 브라우저 파싱 이후, 

리소스들(이미지, js, css....)을 하나씩 요청하고 받고 해야한다.

한번에 하나씩 되기때문에...

그러나 server-push를 이용하면,

리소스들을 한번의 요청에, 한꺼번에 보내줄 수가 있다.

단, 무슨 리소스를 보내줄 것인지 서버측에 코드로 알려주어야한다.

얼마나 좋은 기능인지, express-spdy의 예제코드를 다운받아보면

함수이름이 awesome_push이다 ㅋㅋㅋ

이미지 여러개를 서버 푸시를 이용해서 넣는 예제이다.

(첨엔 express-spdy로 해보려고 했었는데 최신 node.js를 지원도 안하고 구린거같아서

node.js랑 express를 받아서 연동했다. 원래 이렇게 하는게 정석인듯 하다. 구글에서도 이렇게 쓰는듯)

var spdy = require('spdy')   , express = require('express')   , fs = require('fs'); var options = {    key: fs.readFileSync(__dirname + '/keys/spdy-key.pem'),   cert: fs.readFileSync(__dirname + '/keys/spdy-cert.pem'),   ca: fs.readFileSync(__dirname + '/keys/spdy-csr.pem'), }; var app = express(); // 예제 다운로드한거 그대로 쓰는건데 좀 쓸데없는 설정도 많당 app.configure(function(){   app.set('port', process.env.PORT || 3000);   app.set('views', __dirname + '/views');   app.set('view engine', 'jade');   app.use(express.favicon());   app.use(express.logger('dev'));   app.use(express.bodyParser());   app.use(express.methodOverride());   app.use(app.router);   app.use(express.static(path.join(__dirname, 'public'))); }); var http_process = function(req, res) {     var title = 'HTTP';     if (req.isSpdy) {          title = 'SPDY';         awesome_push(req, res);  // SPDY이면 server-push!     }     res.render('index', {         title: title     }); } var awesome_push = function(req, res) {     var header = {'Content-type' : 'image/jpg'};     var path = '/images/aaa.jpg';     var file = fs.readFileSync(__dirname + '/public' + path); // filestream으로부터 file get      res.push(path, header, function(err, stream) {          if (err) return console.error(err);          stream.on('error', function(){});          stream.end(file);      }); } app.get('/', http_process); var server = spdy.createServer(options, app); server.listen(8079);

그리고, views 폴더 밑에 index.jade 에 이미지 뿌리는 코드를 넣었다. (이건 아래 포스트 참조~)

* SPDY인지 아닌지 구별하는 법

req에 들어있는 isSpdy 프로퍼티를 사용하면 SPDY인지 아닌지 판별 가능하다.

isSpdy는 항상 true가 들어있다. 지원을 하지 않는다면 isSpdy는 undefined이다.

github에 server-push예제에는 res.isSpdy인데 아마도 오타인것같다. req가 맞다.

또다른 방법으로는 크롬 웹스토어에서, 확장 앱인 spdy indicator를 다운받으면

브라우저 URL 입력하는 오른쪽에 번개의 색깔이 연두색으로 나타난다.

보니깐 파폭 지원하고, 크롬 지원한다. 안드로이드 브라우저도 넷츠케이프므로(파폭) 지원하더라~

내가 성능 측정을 이상하게 한건가?

이상한 결과가 나온다ㅠㅠㅠㅠ

요청시간은 http보다 두배는 짧은데 응답시간이 길다... 왜그러지???????????????