흔한 개발자 이야기

지난 주에 'WebSocket & Node.js' 라는 주제로 발표하면서 예제로 준비했던 WebSocket을 사용한 간단한 채팅 프로그램을 여기에 올려보려고한다. 이 프로그램은 Google의 Wave서비스에서 아이디어를 얻어서, 훨씬 적은 부하로 Wave와 비슷한 기능을 구현할 수 있다는 것을 보여주려고 만들었기에 "패러디 웨이브"라고 이름을 지었는데, 어쩌다보니 Wave와는 전혀 다른 모습이 되었다.

사용해보신 분들의 요구 사항도 좀 적용하고 코드를 좀 더 정리해서, 실제로 사용할만한 모양을 좀 만든 뒤에 공개할 생각이었는데, 웹브라우저의 WebSocket 지원에 대한 이야기도 있고해서 정리한다고 시간 보내는 것보다는 기록 삼아서라도 되도록 빨리 공개하는 것이 좋다는 판단에서 그냥 공개하게 됐다.(필요한 사람이 있을까 싶긴 하지만...)

발표에서 이야기했지만, "패러디 웨이브"는 다음과 같이 구성되어 있다.

• 클라이언트 : ParodyWave.html
• 서버
  • 웹 소켓 요청 처리 : WebSocket.js
  • "패러디 웨이브" 서비스 : ParodyWave.js

위에서 볼수 있는 것처럼, 프로그램은 서버와 클라이언트로 되어 있고, 서버는 웹소켓 요청을 처리하는 부분과 실제 채팅 서비스를 제공하기 위한 부분으로 나뉘어있다. 각각 파일로 나뉘어 총 3개 파일로 구성되어 있는데, 한 부분씩 세차례에 걸쳐서 여기에 포스트할 예정이다. 오늘은 그 첫번째 부분으로 Node.js로 구현한 웹 소켓 요청을 처리하는 서버 프로그램을 올린다.

웹 소켓 요청 처리 부분은 간단하게나마 HTTP요청도 처리할 수 있도록 되어있고, 웹 소켓 요청의 경우에는 조금만 수정하면 요청 URL에 따라서 여러 서비스도 제공할 수도 있다. 어디까지나 예제 수준의 코드이므로 Node.js를 이용하면 현재의 웹브라우저에서 지원하는 WebSocket을 이런식으로 구현할 수 있다는 참고자료 정도로 보기 바란다.

var WebSocketServer = function (options) {
    require('http').Server.call(this);
    
    this.on('connection', onConnect);
    this.on('request', onRequest);  // HTTP Request Handler
    this.on('upgrade', onUpgrade);  // WebSocket Request Handler
    
    this.WebSocketResponse75 = [
        'HTTP/1.1 101 Web Socket Protocol Handshake', 
        'Upgrade: WebSocket', 
        'Connection: Upgrade',
        'WebSocket-Origin: {origin}',
        'WebSocket-Location: {protocol}://{host}{resource}',
        '',
        ''
    ]
    this.WebSocketResponse76 = [
        'HTTP/1.1 101 Web Socket Protocol Handshake', 
        'Upgrade: WebSocket', 
        'Connection: Upgrade',
        'Sec-WebSocket-Origin: {origin}',
        'Sec-WebSocket-Location: {protocol}://{host}{resource}',
        '',
        '{data}'
    ]
    
    function onConnect() {
    }
    
    function onRequest(req, res) {
        var fileName = '.'
        if (req.url == '/') fileName += '/ParodyWave.html';
        else fileName += req.url;
        require('fs').readFile(fileName, function (err, data) {
            if (err) {
                res.writeHead(404);
                res.end();
                console.log(fileName);
                return;
            } else {
                res.writeHead(200, {'Content-Length': data.length});
                res.write(data);
                res.end();
            }
        });
    }

    function onUpgrade(req, socket, head) {
        if ("sec-websocket-key1", "sec-websocket-key2" in req.headers) { // 76
            var key = calcResponseKey(req.headers["sec-websocket-key1"],
                                    req.headers["sec-websocket-key2"], head);
            if (key) {
                var res = socket.server.WebSocketResponse76.join('rn')
                            .replace(/{origin}/,req.headers.origin || '')
                            .replace(/{protocol}/,'ws')
                            .replace(/{host}/,req.headers.host || '')
                            .replace(/{resource}/,req.url || '')
                            .replace(/{data}/,key);
            } else {
                socket.end();
                return;
            }
        } else {    // 75
            var res = socket.server.WebSocketResponse75.join('rn')
                        .replace(/{origin}/,req.headers.origin || '')
                        .replace(/{protocol}/,'ws')
                        .replace(/{host}/,req.headers.host || '')
                        .replace(/{resource}/,req.url || '')
        }
        
        try {
            socket.write(res, "binary");
            var client = initiateWebSocket(socket);
            
            var action = require('./ParodyWave');
            action.service(client);
            client.ready(); // "open" event for action
            setTimeout(socket.end, 300 * 1000);
        } catch (e) {
            socket.destroy();
        }
    }

    function calcResponseKey(key1, key2, key) {
        var md5 = require('crypto').createHash('md5');
        [key1, key2].forEach(function (k) {
            var n = parseInt(k.replace(/[^d]/g,'')),
                space = k.replace(/[^ ]/g,'').length;
            
            if (space === 0 || n % space !== 0) {
                return null;
            }
            
            n = parseInt(n/space);
            var result = '';
            result += String.fromCharCode(n >> 24 & 0xFF);
            result += String.fromCharCode(n >> 16 & 0xFF);
            result += String.fromCharCode(n >> 8 & 0xFF);
            result += String.fromCharCode(n & 0xFF);
            
            md5.update(result);
        });
        md5.update(key);
        return md5.digest('binary');
    }
    
    function initiateWebSocket(socket) {
        var c = new process.EventEmitter();
        socket.on("data", onData);
        socket.on("end", function () { socket.end(); });
        socket.on("close", onClose);
        socket.on("error", onError);
        socket.wsBuffer = "";
        
        // WebSocket readyState status
        // 0: CONNECTING, 1: OPEN, 2: CLOSING, 3:CLOSED
        c.readyState = 0;
        c.ready = function() {
            if (c.readyState === 0) {
                c.readyState = 1;
                c.emit("open");
            }
        }
        c.write = function (data) {
          try {
            socket.write("u0000", "binary");
            socket.write(data, "utf8");
            socket.write("uffff", "binary");
          } catch(e) {
            socket.end();
          }
        };
        
        c.end = function () {
            socket.end();
            c.readyState = 2;
        };
        
        return c;
        
        function onData(data) {
            socket.wsBuffer += data;
            
            var chunks = socket.wsBuffer.split("ufffd"),
                count = chunks.length - 1;
            
            for (var i = 0 ; i < count ; i ++) {
                var chunk = chunks[i];
                if (chunk[0] == "u0000") {
                    c.emit("message", chunk.slice(1));
                } else {
                    socket.end();
                    return;
                }
            }
            
            socket.wsBuffer = chunks[count];
        }
        
        function onClose() {
            c.emit("close");
            c.readyState = 2;
        }
        
        function onError(exception) {
            if (c.listeners("error").length > 0) {
                c.emit("error", exception);
            } else {
                throw exception;
            }
        }
    }
};
require("sys").inherits(WebSocketServer, require("http").Server);

var server = new WebSocketServer();
server.listen(8888);

간단한 설명을 덧붙여보자면, 5~6줄에서 HTTP 요청과 WebSocket 요청시에 발생하는 Request 이벤트와 Upgrade 이벤트에 대한 핸들러를 등록한다. 엄연히 구분하자면, Upgrade 이벤트 발생시에 이것이 웹소켓 접속으로 프로토콜을 변경할 것인지 구분하는 과정이 있어야겠지만, 생략했다.

30줄부터 시작되는 onRequest 메소드가 HTTP 요청을 처리하는 부분인데, 웹서버 기능을 보강하려면 여길 고치면 되겠다. 현재는 요청한 url에 아무런 처리도 하지않고 그대로 현재 디렉토리에서 해당 파일을 찾아서 보내준다. 파일이 없을 경우에만 404 에러로 처리한다.

45줄부터 나오는 onUpgrade 메소드는 WebSocket 요청을 처리하는 부분으로 HandShake를 옛 방식과 새 방식을 모두 지원하게 해놓았고, 이 접속을 "패러디 웨이브" 서비스로 연결해주는 기능을 한다. 75줄을 적당히 고치면 여러가지 서비스를 요청 경로에 따라서 제공하는 것도 가능할 것이다.