node.js之websocket协议的实现
websocket已经不是什么新鲜的东西了,要在node.js上实现也有socket.io这样好用的第三方模块.但是个人有代码洁癖,实在是受不了在HTML页面上多出一行如下代码:
<script src='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]); }