[cookbook] Socket.io.js 파일의 캐쉬는 어떻게 되는가?

Socket.io.js 파일의 캐쉬는 어떻게 되는가?

node.js 사용할 시 처음으로 접하게 되는 module중 socket.io가 많은 부분을 차지하게 됩니다. http://socket.io 페이지에서 제일 처음보게 되는 client code에서

<script src="/socket.io/socket.io.js"></script>
<script>
  var socket = io.connect('http://localhost');
  socket.on('news', function (data) {
    console.log(data);
    socket.emit('my other event', { my: 'data' });
  });
</script>

/socket.io/socket.io.js 이 파일의 packet 확인해보면 절대로 304 캐쉬가 되지 않고, 200 http code만 반환되는 결과를 확인할 수 있습니다.

node.js_socket.io.js_not_cached

그래서, 캐쉬하는 방법을 알려드리고, 더 좋은 방법도 알려드리겠습니다. 그리고, socket.io.js 파일은 대체 어디 있는걸까요? 실제 존재하지 않습니다. 이 부분도 알려드리겠습니다. :-)

socket.io wiki

위키에 잘 설명되어 있는데, 이것을 찾기가 영 쉽지가 않습니다. wiki config 제일 아래줄에 기입되어(Advised production settings) 있습니다. 해당 페이지의 히스토리를 보시면 아주 가관입니다.

server 예제 코드에서 아래 3줄 삽입하면 끝입니다.

Usage

아래의 설정들의 기본값은 모두 false 입니다. 이것의 설정을 필수로 해야합니다.

io.enable('browser client minification');  // send minified client
io.enable('browser client etag');          // apply etag caching logic based on version number
io.enable('browser client gzip');          // gzip the file

완성소스

var io = require('socket.io').listen(3000);

io.enable('browser client minification');  // send minified client
io.enable('browser client etag');          // apply etag caching logic based on version number
io.enable('browser client gzip');          // gzip the file

io.sockets.on('connection', function (socket) {
  socket.emit('news', { hello: 'world' });
  socket.on('my other event', function (data) {
    console.log(data);
  });
});

삽입하면 아래와 같은 결과를 얻을 수 있습니다.

node.js_socket.io.js_cached


socket.io.js_cache_algo_304

실제 캐쉬관련 코드는

io.enable('browser client etag');

나머지 2줄은 minified, gzip 입니다.

그리고, 이렇게 load되어지는 socket.io.js을 파일로 저장하여 원하는 경로에 관리하시고, html code에 socket.io.js 삽입하시면 됩니다. 왜냐하면, socket.io.js 파일은 socket.io 서버에 파일로 존재/링크되는 것이 아니라, socket.io-client와 연동된 빌드프로세스가 요청때마다 동작하여 (route) socket.io.js 파일을 빌드하게 됩니다. 굳이 이 동작을 요청할 필요는 없겠죠. 꼭 별도로 저장해서 관리하세요.

socket.io.js_cache_algo_200

200 http code에서 etag를 받고

socket.io.js_cache_algo_304

304 http code에서 etag 비교하는 If-None-Match 구문이 존재하는걸 파악할 수 있습니다.

etag 으로 캐쉬하는 방법

대부분 캐쉬 알고리즘은 If-Modified-Since 헤더를 사용하는데, 이상한 형태의 etag를 사용하여 캐쉬하고 있습니다. socket.io는 어떤 방식으로 etag를 생성하여 캐쉬 하는지 알아봅시다.

socket.io::static.js line81참조

socket.io.js_etag_build

manager 객체의 transports 정보 [ 'websocket', 'htmlfile', 'xhr-polling', 'jsonp-polling' ]를 가져와 [ 'w','e','b','s','o','c','k','e','t','h','t','m','l','f','i','l','e','x','h','r','-','p','o','l','l','i','n','g','j','s','o','n','p','-','p','o','l','l','i','n','g' ]

배열로 만들고, 각각의 텍스트 아스키코드를 가져와 합친 후, prefix 로 해당 모듈의 버젼을 붙여서 완성하고 있습니다. 아주 재미있는 알고리즘입니다.

Conclusion

socket.io.js 파일의 캐쉬관련 내용을 기술하였습니다. 이외 socket.io-client의 bin/build 스크립트와 연동된 생성방법이 있는데, 이 부분은 찾아서 보시면 재미있을것입니다. 항상 product level에 이르기 전에는 resource file들에 대한 캐쉬확인은 필수인것을 잊지 마세요. 감새합니다.

추천 관련글