phpsocket分包技巧_WebSocket探秘

来源：https://segmentfault.com/a/1190000012319848

长连接：一个连接上可以连续发送多个数据包，在连接期间，如果没有数据包发送，须要双方发链路检讨包。

TCP/IP：TCP/IP属于传输层，紧张办理数据在网络中的传输问题，只管传输数据。
但是那样对传输的数据没有一个规范的封装、解析等处理，使得传输的数据就很难识别，以是才有了运用层协议对数据的封装、解析等，如HTTP协议。

HTTP：HTTP是运用层协议，封装解析传输的数据。

从HTTP1.1开始实在就默认开启了长连接，也便是要求header中看到的Connection:Keep-alive。
但是这个长连接只是说保持了（做事器可以见告客户端保持韶光Keep-Alive:timeout=200;max=20;）这个TCP通道，直接Request - Response，而不须要再创建一个连接通道，做到了一个性能优化。
但是HTTP通讯本身还是Request - Response。

socket：与HTTP不一样，socket不是协议，它是在程序层面上对传输层协议（可以紧张理解为TCP/IP）的接口封装。

我们知道传输层的协议，是办理数据在网络中传输的，那么socket便是传输通道两端的接口。
以是对付前端而言，socket也可以大略的理解为对TCP/IP的抽象协议。

WebSocket：

WebSocket是包装成了一个运用层协议作为socket,从而能够让客户端和远程做事端通过web建立全双工通信。
websocket供应ws和wss两种URL方案。
协议英文文档和中文翻译

WebSocket API

利用WebSocket布局函数创建一个WebSocket连接，返回一个websocket实例。
通过这个实例我们可以监听事宜，这些事宜可以知道什么时候简历连接，什么时候有被推过来了，什么时候发生缺点了，时候连接关闭。
我们可以利用node搭建一个WebSocket做事器来看看，源码。
同样也可以调用websocket.org网站的demo做事器http://demos.kaazing.com/echo/。

事宜

//创建WebSocket实例，可以利用ws和wss。
第二个参数可以选填自定义协议，如果多协议，可以以数组办法var socket = new WebSocket('ws://demos.kaazing.com/echo');open做事器相应WebSocket连接要求触发

socket.onopen = (event) => { socket.send('Hello Server!'); };message做事器有 相应数据 触发

socket.onmessage = (event) => { debugger; console.log(event.data); };error出错时触发，并且会关闭连接。
这时可以根据缺点信息进行按需处理

socket.onerror = (event) => { console.log('error'); }close

连接关闭时触发，这在两端都可以关闭。
其余如果连接失落败也是会触发的。
针对关闭一样平常我们会做一些非常处理,关于非常参数： 1. socket.readyState 2 正在关闭 3 已经关闭 2. event.wasClean [Boolean] true 客户端或者做事器端调用close主动关闭 false 反之 3. event.code [Number] 关闭连接的状态码。
socket.close(code, reason) 4. event.reason [String] 关闭连接的缘故原由。
socket.close(code, reason) socket.onclose = (event) => { debugger; }

方法

socket.onopen = (event) => { socket.send('Hello Server!');};如果是须要去相应别的事宜再发送，也便是将WebSocket实例socket交给别的方法利用，由于在发送时你不一定知道socket是否还连接着，以是可以检讨readyState属性的值是否即是OPEN常量，也便是查看socket是否还连接着。

btn.onclick = function startSocket(){ //判断是否连接是否还存在 if(socket.readyState == WebSocket.OPEN){ var message = document.getElementById(\公众message\"大众).value; if(message != \"大众\公众) socket.send(message); }}close利用close([code[,reason]])方法可以关闭连接。
code和reason均为选填

// 正常关闭socket.close(1000, \"大众closing normally\公众);

常量

常量名值描述CONNECTING0连接还未开启OPEN1连接开启可以通信CLOSING2连接正在关闭中CLOSED3连接已经关闭

属性

属性名值类型描述binaryTypeString表示连接传输的二进制数据类型的字符串。
默认为\"大众blob\"大众。
bufferedAmountNumber只读。
如果利用send()方法发送的数据过大，虽然send()方法会立时实行，但数据并不是立时传输。
浏览器会缓存运用流出的数据，你可以利用bufferedAmount属性检讨已经进入行列步队但还未被传输的数据大小。
在一定程度上可以避免网络饱和。
protocolString/Array在布局函数中，protocol参数让做事端知道客户端利用的WebSocket协议。
而在实例socket中便是连接建立前为空，连接建立后为客户端和做事器端确定下来的协议名称。
readyStateString只读。
连接当前状态，这些状态是与常量相对应的。
extensionsString做事器选择的扩展。
目前，这只是一个空字符串或通过连接协商的扩展列表。

WebSocket大略实现

WebSocket 协议有两部分：握手、数据传输。

个中，握手无疑是关键，是统统的先决条件。

握手

//创建WebSocket实例，可以利用ws和wss。
第二个参数可以选填自定义协议，如果多协议，可以以数组办法var socket = new WebSocket('ws://localhost:8081', [protocol]);出于WebSocket的产生缘故原由是为了浏览器能实现同做事器的全双工通信和HTTP协议在浏览器真个广泛利用（当然也不全是为了浏览器，但是紧张还是针对浏览器的）。
以是WebSocket的握手是HTTP要求的升级。
WebSocket客户端要求头示例：

GET /chat HTTP/1.1 //必需。
Host: server.example.com // 必需。
WebSocket做事器主机名Upgrade: websocket // 必需。
并且值为\"大众 websocket\"大众。
有个空格Connection: Upgrade // 必需。
并且值为\"大众 Upgrade\"大众。
有个空格Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ== // 必需。
其值采取base64编码的随机16字节长的字符序列。
Origin: http://example.com //浏览器必填。
头域（RFC6454）用于保护WebSocket做事器不被未授权的运行在浏览器的脚本跨源利用WebSocket API。
Sec-WebSocket-Protocol: chat, superchat //选填。
可用选项有子协议选择器。
Sec-WebSocket-Version: 13 //必需。
版本。
WebSocket客户端将上述要求发送到做事器。
如果是调用浏览器的WebSocket API,浏览器会自动完成完成上述要求头。
做事端握手相应做事器得向客户端证明它吸收到了客户真个WebSocket握手，为使做事器不接管非WebSocket连接，防止攻击者通过XMLHttpRequest发送或表单提交精心布局的包来欺骗WebSocket做事器。
做事器把两块信息合并来形成相应。
第一块信息来自客户端握手头域Sec-WebSocket-Key，如Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==。
对付这个头域，做事器取头域的值（须要先肃清空缺符），以字符串的形式拼接全局唯一的（GUID，[RFC4122]）标识：258EAFA5-E914-47DA-95CA-C5AB0DC85B11，此值不大可能被不明白WebSocket协议的网络终端利用。
然后进行SHA-1 hash（160位）编码，再进行base64编码，将结果作为做事器的握手返回。
详细如下：

要求头：Sec-WebSocket-Key:dGhlIHNhbXBsZSBub25jZQ==取值，字符串拼接后得到：\公众dGhlIHNhbXBsZSBub25jZQ==258EAFA5-E914-47DA-95CA-C5AB0DC85B11\"大众;SHA-1后得到： 0xb3 0x7a 0x4f 0x2c 0xc0 0x62 0x4f 0x16 0x90 0xf6 0x46 0x06 0xcf 0x38 0x59 0x45 0xb20xbe 0xc4 0xeaBase64后得到： s3pPLMBiTxaQ9kYGzzhZRbK+xOo=末了的结果值作为相应头Sec-WebSocket-Accept 的值。
终极形成WebSocket做事器真个握手相应：

HTTP/1.1 101 Switching Protocols //必需。
相应头。
状态码为101。
任何非101的相应都为握手未完成。
但是HTTP语义是存在的。
Upgrade: websocket // 必需。
升级类型。
Connection: Upgrade //必需。
本次连接类型为升级。
Sec-WebSocket-Accept:s3pPLMBiTxaQ9kYGzzhZRbK+xOo= //必需。
表明做事器是否乐意接管连接。
如果接管，值就必须是通过上面算法得到的值。
当然相应头还存在一些可选字段。
紧张的可选字段为Sec-WebSocket-Protocol，是对客户端要求中所供应的Sec-WebSocket-Protocol子协议的选择结果的相应。
当然cookie什么的也是可以的。

//handshaking.jsconst crypto = require('crypto'); const cryptoKey = '258EAFA5-E914-47DA-95CA-C5AB0DC85B11'; // 打算握手相应accept-key let challenge = (reqKey) => { reqKey += cryptoKey; // crypto.vetHashes()可以得到支持的hash算法数组，我这里得到46个 reqKey = reqKey.replace(/\s/g,\"大众\"大众); // crypto.createHash('sha1').update(reqKey).digest()得到的是一个Uint8Array的加密数据，须要将其转为base64 return crypto.createHash('sha1').update(reqKey).digest().toString('base64'); } exports.handshaking = (req, socket, head) => { let _headers = req.headers, _key = _headers['sec-websocket-key'], resHeaders = [], br = \公众\r\n\公众; resHeaders.push( 'HTTP/1.1 101 WebSocket Protocol Handshake is OK', 'Upgrade: websocket', 'Connection: Upgrade', 'Sec-WebSocket-Origin: ' + _headers.origin, 'Sec-WebSocket-Location: ws://' + _headers.host + req.url, ); let resAccept = challenge(_key); resHeaders.push('Sec-WebSocket-Accept: '+ resAccept + br, head); socket.write(resHeaders.join(br), 'binary'); }握手关闭关闭握手可用利用TCP直接关闭连接的方法来关闭握手。
但是TCP关闭握手不总是端到端可靠的，特殊是涌现拦截代理和其他的中间举动步伐。
也可以任何一端发送带有指定掌握序号（比如说状态码1002,协议缺点）的数据的帧来开始关闭握手，当另一方吸收到这个关闭帧，就必须关闭连接。

数据传输

在WebSocket协议中,数据传输阶段利用frame（数据帧）进行通信，frame分不同的类型，紧张有：文本数据，二进制数据。
出于安全考虑和避免网络截获，客户端发送的数据帧必须进行掩码处理后才能发送到做事器，不论是否是在TLS安全协议上都要进行掩码处理。
做事器如果没有收到掩码处理的数据帧时该当关闭连接，发送一个1002的状态码。
做事器不能将发送到客户真个数据进行掩码处理，如果客户端收到掩码处理的数据帧必须关闭连接。

那我们做事器端吸收到的数据帧是若何的呢？

数据帧WebSocket的数据传输是要遵照特定的数据格式-数据帧（frame）.

1 为末了一帧 0 不是末了一帧。
须要分为多个帧传输rsv1-3： 默认为0.吸收协商扩展定义为非0设定。
opcode： 操作码，也便是定义了该数据是什么，如果不为定义内的值则连接中断。
占四个位，可以表示0~15的十进制，或者一个十六进制。

%x0 表示一个连续帧 %x1 表示一个文本帧 %x2 表示一个二进制帧 %x3-7 为往后的非掌握帧保留 %x8 表示一个连接关闭 %x9 表示一个ping %x10 表示一个pong %x11-15 为往后的掌握帧保留masked： 占第二个字节的一位，定义了masking-key是否存在。
并且利用masking-key掩码解析Payload data。

1 客户端发送数据到做事端 0 做事端发送数据到客户端payload length： 表示Payload data的总长度。
占7位，或者7+2个字节、或者7+8个字节。

0-125，则是payload的真实长度 126，则后面2个字节形成的16位无符号整型数的值是payload的真实长度，125<数据长度<65535 127，则后面8个字节形成的64位无符号整型数的值是payload的真实长度，数据长度>65535masking key： 0或4字节，当masked为1的时候才存在，为4个字节，否则为0，用于对我们须要的数据进行解密payload data： 我们须要的数据，如果masked为1，该数据会被加密，要通过masking key进行异或运算解密才能获取到真实数据。
关于数据帧由于WebSocket做事端吸收到的数据有可能是连续的数据帧，一个message可能分为多个帧发送。
但如果利用fin来做边界是有问题的。
我发送了一个27378个字节的字符串，做事器端共吸收到2帧，两帧的fin都为1,而且根据规范打算出来的两帧的payload data的长度为27372少了6个字节。
这短缺的6个字节实在刚好即是2个固有字节加上maskingKey的4个字节，也便是说第二帧便是一个纯粹的数据帧。
这又是怎么回事呢？？从结果推测实现，我们吸收到的第2帧的数据格式不是帧格式，解释数据没有先分帧（分片）后再发送的。
而是将一帧分包后发送的。

分片

分片的紧张目的是许可当开始但不必缓冲该时发送一个未知大小的。
如果不能被分片，那么端点将不得不缓冲全体以便在首字节发生之前统计出它的长度。
对付分片，做事器或中间件可以选择一个得当大小的缓冲，当缓冲满时，写一个片段到网络。

//dataHandler.js// 网络本次message的所有数据getData(data, callback) { this.getState(data); // 如果状态码为8解释要关闭连接 if(this.state.opcode == 8) { this.OPEN = false; this.closeSocket(); return; } // 如果是心跳pong,回一个ping if(this.state.opcode == 10) { this.OPEN = true; this.pingTimes = 0;// 回了pong就将次数清零 return; } // 网络本次数据流数据 this.dataList.push(this.state.payloadData); // 长度为0，解释当前帧位末了一帧。
if(this.state.remains == 0){ let buf = Buffer.concat(this.dataList, this.state.payloadLength); //利用掩码maskingKey解析所有数据 let result = this.parseData(buf); // 数据吸收完成后回调回业务函数 callback(this.socket, result); //重置状态，表示当前message已经解析完成了 this.resetState(); }else{ this.state.index++; }}// 网络本次message的所有数据getData(data, callback) { this.getState(data); // 网络本次数据流数据 this.dataList.push(this.state.payloadData); // 长度为0，解释当前帧位末了一帧。
if(this.state.remains == 0){ let buf = Buffer.concat(this.dataList, this.state.payloadLength); //利用掩码maskingKey解析所有数据 let result = this.parseData(buf); // 数据吸收完成后回调回业务函数 callback(this.socket, result); //重置状态，表示当前message已经解析完成了 this.resetState(); }else{ this.state.index++; }}// 解析本次message所有数据parseData(allData, callback){ let len = allData.length, i = 0; for(; i < len; i++){ allData[i] = allData[i] ^ this.state.maskingKey[ i % 4 ];// 异或运算，利用maskingKey四个字节轮流进行打算 } // 判断数据类型，如果为文本类型 if(this.state.opcode == 1) allData = allData.toString(); return allData; }组装须要发送的数据帧

// 组装数据帧，发送是不须要掩码加密createData(data){ let dataType = Buffer.isBuffer(data);// 数据类型 let dataBuf, // 须要发送的二进制数据 dataLength,// 数据真实长度 dataIndex = 2; // 数据的起始长度 let frame; // 数据帧 if(dataType) dataBuf = data; else dataBuf = Buffer.from(data); // 也可以不做类型判断，直接Buffer.form(data) dataLength = dataBuf.byteLength; // 打算payload data在frame中的起始位置 dataIndex = dataIndex + (dataLength > 65535 ? 8 : (dataLength > 125 ? 2 : 0)); frame = new Buffer.alloc(dataIndex + dataLength); //第一个字节,fin = 1,opcode = 1 frame[0] = parseInt(10000001, 2); //长度超过65535的则由8个字节表示，由于4个字节能表达的长度为4294967295，已经完备够用，因此直接将前面4个字节置0 if(dataLength > 65535){ frame[1] = 127; //第二个字节 frame.writeUInt32BE(0, 2); frame.writeUInt32BE(dataLength, 6); }else if(dataLength > 125){ frame[1] = 126; frame.writeUInt16BE(dataLength, 2); }else{ frame[1] = dataLength; } // 做事端发送到客户真个数据 frame.write(dataBuf.toString(), dataIndex); return frame;}心跳检测

// 心跳检讨sendCheckPing(){ let _this = this; let timer = setTimeout(() => { clearTimeout(timer); if (_this.pingTimes >= 3) { _this.closeSocket(); return; } //记录心跳次数 _this.pingTimes++; if(_this.pingTimes == 100000) _this.pingTimes = 0; _this.sendCheckPing(); }, 5000);}// 发送心跳pingsendPing() { let ping = Buffer.alloc(2); ping[0] = parseInt(10001001, 2); ping[1] = 0; this.writeData(ping);}

关闭连接

客户端直接调用close方法，做事器端可以利用socket.end方法。

末了

WebSocket在一定程度上让前端更加的有所作为，这个无疑是令人欣喜的，但是其规范中的很多不愿定也是令人很惋惜的。

由于浏览器对WebSocket规范的不完备实现，还有很多须要做的优化，这篇文章只是实现以一下WebSocket，关于期间很多的安全、稳定等方面的须要在运用中进行充足。
当然是用socket.io这种相对成熟的插件也是不错的选择。