深入WebSocket通信协议细节

传统“长轮询”实现Web端即时通讯的问题

WebSocket出现之前，Web端为了实现即时通讯，所用的技术都是Ajax轮询(polling)。轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP request，然后由服务器返回最新的数据给客服端的浏览器。这种传统的HTTP request 的模式带来很明显的缺点 – 浏览器需要不断的向服务器发出请求，然而HTTP request 的header是非常长的，里面包含的数据可能只是一个很小的值，这样会占用很多的带宽。

而比较新的技术去做轮询的效果是Comet , 但这种技术虽然可达到全双工通信，依然需要发出请求。

WebSocket 技术概览

在 WebSocket API，浏览器和服务器只需要要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送，改变了原有的B/S模式。

WebSocket技术应用的典型架构：

WebSocket的技术原理：

浏览器端的websocket 发起的请求一般是：

// javacsript   var ws = new WebSocket("ws://127.0.0.1:4000");   ws.onopen = function(){     console.log("succeed");   };   ws.onerror = function(){     console.log(“error”);   };   ws.onmessage = function(e){   console.log(e);    }

 当 new 一个 websocket 对象之后，就会向服务器发送一个 get 请求：

这个请求是对摸个服务器的端口发送的，一般的话，会预先在服务器将一个socket 绑定到一个端口上，客户端和服务器端在这个预定的端口上通信（我这里绑定的就是 4000 端口，默认情况下，websocke 使用 80 端口）。

然后，在服务器端的socket监听到这个packet 之后就生成一个新的 socket，将发送过来的数据中的 Sec-WebSocket-Key 解析出来，然后按照把“Sec-WebSocket-Ke”加上一个魔幻字符串“258EAFA5-E914-47DA-95CA-C5AB0DC85B11”。使用SHA-1加密，之后进行BASE-64编码，将结果做为“Sec-WebSocket-Accept”头的值，返回给客户端。

客户端收到这个之后，就会将通信协议 upgrade 到 websocket 协议：

然后就会在这个持久的通道下进行通信，包括浏览器的询问，服务器的push，双方是在一个全双工的状态下相互通信。

WebSocket 通信协议

如上述的例子：切换后的websocket 协议中的数据传输帧的格式(此时不再使用html协议) 官方文档给出的说明：

直接看这个，谁都会有点头大: 我花了一幅图来简单的解释这个 frame 的结构：

各字段的解释：

   FIN               1bit 表示信息的最后一帧，flag，也就是标记符
 RSV  1-3        1bit each 以后备用的 默认都为 0
 Opcode          4bit 帧类型，
 Mask               1bit 掩码，是否加密数据，默认必须置为1 
 Payload  len   7bit 数据的长度，当这个7 bit的数据 == 126 时，后面的2 个字节也是表示数     据长度，当它 == 127 时，后面的 8 个字节表示数据长度
 Masking-key       1 or 4 bit 掩码
 Payload  data  playload len  bytes 数据
 

所以我们这里的代码，通过判断 Playload len的值，来用 substr 截取 Masking-key 和 PlayloadData。

根据掩码解析数据的方法是：

   for(  i = 0;  i < data.length ; i++){
    orginalData  += data[i]  ^  maskingKey[i mod 4];
 }
 

在PHP中，当我们收到数据之后，按照这里的格式截取数据，并将其按照这里的方法解析后就得到了浏览器发送过来的数据。当我们想把数据发送给浏览器时，也要按照这个格式组装frame。这里是我的方法：

function frame($s){                   $a = str_split($s, 125);                   if (count($a) == 1){                           return "\x81" . chr(strlen($a[0])) . $a[0];                   }                   $ns = "";                   foreach ($a as $o){                           $ns .= "\x81" . chr(strlen($o)) . $o;                   }                   return $ns;           }

 强行将要发送的数据分割成 125 Byte / frame，这样 playload len 只需要 7 bits。也就是直接将数据的长度的ascall码拼接上去，然后后面跟上要发送的数据。 每一个 frame 前面加的 ‘\x81’ 用二进制就是： 1000  0001 1000 ：

是 FIN
是三个备用的bit
 

0001 指的是 opcode 官方的解释：

可以设置 opcode的值，来告诉浏览器这个frame的数据属性。

来源：CSDN

作者：Erica_1230

链接：https://blog.csdn.net/Erica_1230/article/details/70544177

标签

websocket

通信协议