websocket已经不是什么新鲜的东西了,要在node.js上实现也有socket.io这样好用的第三方模块.但是个人有代码洁癖,实在是受不了在HTML页面上多出一行如下代码:

    <script src=http://www.mamicode.com/‘http://192.168.0.143:4000/socket.io/socket.io.js‘></script>

而且,项目上要实现的效果是和canvas交互,有些东西还是和socket封装在一起比较简单,所以自己踏上了探究websocket的道路.

顺便共享下我的劳动成果,还不算完善,因为项目就我一个人在搞...进程有点慢(demo下载后,node启动nodeCanvas.js)

GitHub:nodeCanvas

因为在github里面的代码有注释,所以我只说一下websocket大概的实现步骤.

Browser端:

 websocket = new WebSocket("ws://" + ip + ":3000/");
 
       //websocket的各种事件
        websocket.onopen = function () {
            console.log("Connected to WebSocket server.");
        };
         
        websocket.onclose = function () {
            console.log("Disconnected");
            //zwei.close();
        };

        websocket.onmessage = function (evt) {
            console.log(‘Retrieved data from server: ‘ + evt.data);
            //zwei.msg();
        };
        
        websocket.onerror = function (evt) {
            console.log(‘Error occured: ‘ + evt.data);
            //zwei.error();
        };
        
        websocket.send("zwei");

上面的是一看就懂的东西有几个要注意的东西是send发送的东西可以是对象或者数组等,但是不能是多个,只能是一个,而且在server端接收的时候全部都变成十六进制的.

Server端:

server端一开始就比较蛋疼,搞了我将近一个星期,因为之前没弄个http头啥的,对这方面了解不深也不多....总体上分为2个部分.第一个是协议的升级,让2端意识到协议升级为websocket.第二个部分就是解码(后面在介绍).

第一个部分,直接上代码:

  var key = req.headers[‘sec-websocket-key‘],
            steam = new Buffer(0),
            resHeaders,
            MAGIC_STRING = ‘258EAFA5-E914-47DA-95CA-C5AB0DC85B11‘,
            websocket;

        key = require(‘crypto‘)
            .createHash(‘sha1‘)
            .update(key + MAGIC_STRING)
            .digest(‘base64‘);
        resHeaders = [
            ‘HTTP/1.1 101 Switching Protocols‘,
            ‘Upgrade: websocket‘,
            ‘Connection: Upgrade‘,
            ‘Sec-WebSocket-Accept: ‘ + key
        ];
        resHeaders = resHeaders.concat(‘‘, ‘‘).join(‘\r\n‘);
        socket.setNoDelay(true);
        socket.write(resHeaders);

这部分就是握手的过程。首先客户端发起一个名为Upgrade的HTTP GET请求，服务器验证此请求，给出101响应以表示接受此次协议升级，握手即完成了。

因为在 http 协议之上的 websocket 协议实现只有两步：握手，发送数据。所以这样就算建立起了websocket的连接了.

上面代码各个部分的作用可以自行百度,或者看<<深入浅出Node.js>>,我也是大部分从这本书里学的

第二部分:

这里我卡了很久,因为websocket传送到server端时,数据是十六进制的格式,而且还是加密的,虽然解码是有规律的不过也折腾了我好久,之后在cnode论坛看到有人写了一个解码的,试了下可以,之后就拿他的代码改了下(毕竟我自己基础知识不好,对位运算毫无办法),这2段代码还是不错的,一个解码,一个加密用于传送回browser(在browser端接收到server端数据时是自动解码的所以不用解码),直接贴上代码:

//处理掩码Buffer流(接收)
function decodeFrame(frame) {
    if (frame.length < 2) {
        return null;
    }

    var counter = 0,
        fin_offset = 7,
        opcode_offset = parseInt(1111, 2),   //15
        mask_offset = 7,
        payload_len_offset = parseInt(1111111, 2),   //127
        FIN ,
        Opcode ,
        MASK ,
        Payload_len,
        buffer,
        Masking_key,
        i,
        j;

    FIN = frame[counter] >> fin_offset;

    Opcode = frame[counter++] & opcode_offset;
    MASK = frame[counter] >> mask_offset;
    Payload_len = frame[counter++] & payload_len_offset;
    Payload_len === 126 && (Payload_len = frame.readUInt16BE(counter)) && (counter += 2);
    Payload_len === 127 && (Payload_len = frame.readUInt32BE(counter + 4)) && (counter += 8);

    buffer = new Buffer(Payload_len);
    if (MASK) {
        Masking_key = frame.slice(counter, counter + 4);
        counter += 4;
        for (i = 0; i < Payload_len; i++) {
            j = i % 4;
            buffer[i] = frame[counter + i] ^ Masking_key[j];
        }
    }
    if (frame.length < counter + Payload_len) {
        return undefined;
    }

    frame = frame.slice(counter + Payload_len);

    return {
        FIN: FIN,
        Opcode: Opcode,
        MASK: MASK,
        Payload_len: Payload_len,
        Payload_data: buffer,
        frame: frame
    };
}


//处理掩码Buffer流(发送)
function encodeFrame(frame) {
    var preBytes = [],

        payBytes = new Buffer(frame.Payload_data),
        dataLength = payBytes.length;
    preBytes.push((frame.FIN << 7) + frame.Opcode);

    if (dataLength < 126) {
        preBytes.push((frame.MASK << 7) + dataLength);
    }

    else if (dataLength < Math.pow(2, 16)) {
        preBytes.push(
            (frame.MASK << 7) + 126,
            (dataLength && 0xFF00) >> 8,
            dataLength && 0xFF
        );
    }
    else {
        preBytes.push(
            (frame.MASK << 7) + 127,
            0, 0, 0, 0,
            (dataLength && 0xFF000000) >> 24,
            (dataLength && 0xFF0000) >> 16,
            (dataLength && 0xFF00) >> 8,
            dataLength && 0xFF
        );
    }
    preBytes = new Buffer(preBytes);
    return Buffer.concat([preBytes, payBytes]);
}

node.js之websocket协议的实现