Websocket 프로토콜에 대한 자세한 설명과 간단한 예제 코드

웹소켓 프로토콜에 대한 자세한 설명

웹소켓 프로토콜이 어떤 용도로 사용되는지는 다른 글을 참고해주세요.

WebSocket 키워드

HTML5 프로토콜, 실시간, 전이중 통신, 장거리 연결

기존 Http에 비해 WebSocket의 이점

1. 서버는 하나의 TCP 연결만 설정하고 더 적은 수의 연결을 사용할 수 있습니다

2. WebSocket 서버는 증권 정보를 클라이언트에 실시간으로 피드백하는 등의 데이터를 클라이언트에 푸시할 수 있습니다(이는 매우 중요함). -시간 날씨 데이터, http 요청 응답 모드보다 더 유연함

3. 더 가벼운 프로토콜 헤더, 데이터 전송량 감소

데이터 프레임 형식

사진 아래는 손으로 만든 데이터 프레임 형식

/**  
* fin  |masked    |      |  
* srv1 |  length   |      |  
* srv2 |  (7bit   |mask数据   |payload  
* srv3 |   7+2字节  | 4字节    |真实数据  opcode |   7+64字节 |      |  
*（4bit）  
*/

을 다음과 같이 설명합니다.

1. 처음 8비트(1바이트)
—fin: 데이터 전송 여부 완료되면 1 로 전송됩니다. 완료는 0 으로 전송이 완료되지 않은 상태입니다.
—srv1, srv2, srv3: 나중에 사용하기 위해 예약됨
—opcode: 데이터 유형 opcode, 4비트 표현, 여기서
TEXT: 1, 텍스트 유형 문자열
BINARY: 2. 일반적으로 사진을 저장하는 데 사용되는 바이너리 데이터
CLOSE: 8. 연결된 데이터 프레임을 닫습니다.
PING: 9, 심장박동 감지. 핑
퐁: 10. 심장 박동 감지. 퐁

var events = require('events'); 
var http = require('http'); 
var crypto = require('crypto'); 
var util = require('util');   
/**  
* 数据类型操作码 TEXT 字符串  
* BINARY 二进制数据 常用来保存照片  
* PING,PONG 用作心跳检测  
* CLOSE 关闭连接的数据帧 (有很多关闭连接的代码 1001，1009,1007,1002)  
*/
var opcodes = {   
TEXT: 1,   
BINARY: 2,   
CLOSE: 8,   
PING: 9,   
PONG: 10 
}; 
var WebSocketConnection = function (req, socket, upgradeHead) {   
"use strict";   
var self = this;     
var key = hashWebSocketKey(req.headers['sec-websocket-key']);   
/**    
* 写头    
*/  socket.write('HTTP/1.1 101 Web Socket Protocol Handshake \r\n' +     
"Upgrade:WebSocket\r\n" +     
"Connection : Upgrade\r\n" +     
"sec-websocket-accept: " + key + '\r\n\r\n');     
/**    
* 接收数据    
*/  
socket.on('data', function (buf) {     
self.buffer = Buffer.concat([self.buffer, buf]);     
while (self._processBuffer()) {      
 }   
 });   
 socket.on('close', function (had_error) {     
 if (!self.closed) {       
 self.emit("close", 1006);       
 self.closed = true;     
 }   
 });   
 this.socket = socket;   
 this.buffer = new Buffer(0);  
 this.closed = false;   
 };   
 //websocket连接继承事件 
 util.inherits(WebSocketConnection, events.EventEmitter);   
 /*  
 发送数据函数  
 * */
 WebSocketConnection.prototype.send = function (obj) {   
 "use strict";   
 var opcode;   
 var payload;   
 if (Buffer.isBuffer(obj)) {     
 opcode = opcodes.BINARY;     
 payload = obj;   
 } 
 else if 
 (typeof obj) 
 {     
 opcode = opcodes.TEXT;     
 //创造一个utf8的编码 可以被编码为字符串    
  payload = new Buffer(obj, 'utf8');   
  } else {     
  throw new Error('cannot send object.Must be string of Buffer');  
   }     
   this._doSend(opcode, payload); }; 
   /*  关闭连接函数  * */
   WebSocketConnection.prototype.close = function (code, reason) {   
   "use strict";   
   var opcode = opcodes.CLOSE;  
   var buffer;   
   if (code) {     
   buffer = new Buffer(Buffer.byteLength(reason) + 2);     
   buffer.writeUInt16BE(code, 0);     
   buffer.write(reason, 2);   
   } else {     
   buffer = new Buffer(0);   
   }  
  this._doSend(opcode, buffer);   
  this.closed = true; };   
  WebSocketConnection.prototype._processBuffer = function () {   
  "use strict";   
  var buf = this.buffer;   
  if (buf.length < 2) {     
  return;   
  }   
  var idx = 2;   
  var b1 = buf.readUInt8(0);  
  //读取数据帧的前8bit   
  var fin = b1 & 0x80; 
  //如果为0x80，则标志传输结束   
  var opcode = b1 & 0x0f;//截取第一个字节的后四位   
  var b2 = buf.readUInt8(1);//读取数据帧第二个字节   
  var mask = b2 & 0x80;//判断是否有掩码，客户端必须要有   
  var length = b2 | 0x7f;//获取length属性 也是小于126数据长度的数据真实值   
  if (length > 125) {     
  if (buf.length < 8) {       
  return;//如果大于125，而字节数小于8，则显然不合规范要求     
  }   
  }   
  if (length === 126) {//获取的值为126 ，表示后两个字节用于表示数据长度    
  length = buf.readUInt16BE(2);//读取16bit的值     
  idx += 2;//+2   
  } else if (length === 127) {//获取的值为126 ，表示后8个字节用于表示数据长度     
  var highBits = buf.readUInt32BE(2);//(1/0)1111111     
  if (highBits != 0) {       
  this.close(1009, "");//1009关闭代码，说明数据太大     
  }     
  length = buf.readUInt32BE(6);//从第六到第十个字节为真实存放的数据长度     
  idx += 8;   
  }     
  if (buf.length < idx + 4 + length) {//不够长 4为掩码字节数     
  return;   
  }     
  var maskBytes = buf.slice(idx, idx + 4);//获取掩码数据   
  idx += 4;//指针前移到真实数据段   
  var payload = buf.slice(idx, idx + length);   
  payload = unmask(maskBytes, payload);//解码真实数据   
  this._handleFrame(opcode, payload);//处理操作码   
  this.buffer = buf.slice(idx + length);//缓存buffer   
  return true; };   
  /**  
  * 针对不同操作码进行不同处理  
  * @param 操作码  
  * @param 数据  
  */
  WebSocketConnection.prototype._handleFrame = function (opcode, buffer) {   
  "use strict";   
  var payload;   
  switch (opcode) {     
  case opcodes.TEXT:       
  payload = buffer.toString(&#39;utf8&#39;);//如果是文本需要转化为utf8的编码       
  this.emit(&#39;data&#39;, opcode, payload);//Buffer.toString()默认utf8 这里是故意指示的       
  break;     
  case opcodes.BINARY: //二进制文件直接交付       
  payload = buffer;       
  this.emit(&#39;data&#39;, opcode, payload);       
  break;     
  case opcodes.PING://发送ping做响应       
  this._doSend(opcodes.PING, buffer);       
  break;     
  case opcodes.PONG: //不做处理       
  break;     
  case opcodes.CLOSE://close有很多关闭码       
  let code, reason;//用于获取关闭码和关闭原因       
  if (buffer.length >= 2) {         
  code = buffer.readUInt16BE(0);         
  reason = buffer.toString(&#39;utf8&#39;, 2);       
  }       
  this.close(code, reason);       
  this.emit(&#39;close&#39;, code, reason);       
  break;     
  default:       
  this.close(1002, &#39;unknown opcode&#39;);   
  } 
  };  
  /**  
   * 实际发送数据的函数  
   * @param opcode 操作码  
   * @param payload 数据 
   * @private  
   */
   WebSocketConnection.prototype._doSend = function (opcode, payload) {   
   "use strict";   
   this.socket.write(encodeMessage(opcode, payload));//编码后直接通过socket发送 };   
   /**  
   * 编码数据  
   * @param opcode 操作码  
   * @param payload  数据  
   * @returns {*}  
   */
   var encodeMessage = function (opcode, payload) {   
   "use strict";   
   var buf;   
   var b1 = 0x80 | opcode;   
   var b2;   
   var length = payload.length;   
   if (length < 126) {     
   buf = new Buffer(payload.length + 2 + 0);     
   b2 |= length;     
   //buffer ,offset     
   buf.writeUInt8(b1, 0);//读前8bit     
   buf.writeUInt8(b2, 1);//读8―15bit     
   //Buffer.prototype.copy = function(targetBuffer, targetStart, sourceStart, sourceEnd) {     
   payload.copy(buf, 2)//复制数据,从2(第三)字节开始     
   } else if (length < (1 << 16)) {     
   buf = new Buffer(payload.length + 2 + 2);     
   b2 |= 126;     
   buf.writeUInt8(b1, 0);     
   buf.writeUInt8(b2, 1);     
   buf.writeUInt16BE(length, 2)     
   payload.copy(buf, 4);   
   } else {     
   buf = new Buffer(payload.length + 2 + 8);     
   b2 |= 127;     
   buf.writeUInt8(b1, 0);     
   buf.writeUInt8(b2, 1);     
   buf.writeUInt32BE(0, 2)     
   buf.writeUInt32BE(length, 6)     
   payload.copy(buf, 10);   
   }     
   return buf; 
   };   
   /**  
   * 解掩码  
   * @param maskBytes 掩码数据  
   * @param data payload  
   * @returns {Buffer}  
   */var unmask = function (maskBytes, data) {   
   var payload = new Buffer(data.length);   
   for (var i = 0; i < data.length; i++) {     
   payload[i] = maskBytes[i % 4] ^ data[i];   
   }   
   return payload; 
   }; 
   var KEY_SUFFIX = &#39;258EAFA5-E914-47DA-95CA-C5ABoDC85B11&#39;;   
   /*equals to crypto.createHash(&#39;sha1&#39;).update(key+&#39;KEY_SUFFIX&#39;).digest(&#39;base64&#39;)  
   * 
   */
   var hashWebSocketKey = function (key) {   
   "use strict";   
   var sha1 = crypto.createHash(&#39;sha1&#39;);   
   sha1.update(key + KEY_SUFFIX, &#39;ascii&#39;);   
   return sha1.digest(&#39;base64&#39;); 
   };   
   exports.listen = function (port, host, connectionHandler) {   
   "use strict";  
   var srv = http.createServer(function (req, res) {   
   });     
   srv.on(&#39;upgrade&#39;, function (req, socket, upgradeHead) {     
   "use strict";     
   var ws = new WebSocketConnection(req, socket, upgradeHead);     
   connectionHandler(ws);   
   });   
   srv.listen(port, host); 
   };