WebSocket详解(三):深入WebSocket通信协议细节
2017-05-03 00:00
267 查看
摘要: WebSocket 是HTML5一种新的web通信技术,它真正实现了浏览器与服务器的全双工实时通信(full-duplex)。本文将详解介绍WebSocket的通信协议细节。
而比较新的技术去做轮询的效果是Comet(是一种被hack出来的基于http长连接的“服务器推”技术,看看这篇文章可以对Comet技术有个直观的了解:《开源Comet服务器iComet:支持百万并发的Web端即时通讯方案》)。但这种技术虽然可达到全双工通信,依然需要发出请求。
WebSocket技术应用的典型架构:
WebSocket的技术原理:
浏览器端的websocket 发起的请求一般是:
当 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,双方是在一个全双工的状态下相互通信。
直接看这个,谁都会有点头大: 我花了一幅图来简单的解释这个 frame 的结构:
各字段的解释:
所以我们这里的代码,通过判断 Playload len的值,来用 substr 截取 Masking-key 和 PlayloadData。
根据掩码解析数据的方法是:
在PHP中,当我们收到数据之后,按照这里的格式截取数据,并将其按照这里的方法解析后就得到了浏览器发送过来的数据。 当我们想把数据发送给浏览器时,也要按照这个格式组装frame。 这里是我的方法:
强行将要发送的数据分割成 125 Byte / frame,这样 playload len 只需要 7 bits。也就是直接将数据的长度的ascall码拼接上去,然后后面跟上要发送的数据。 每一个 frame 前面加的 ‘\x81’ 用二进制就是: 1000 0001 1000 :
0001 指的是 opcode 官方的解释:
可以设置 opcode的值,来告诉浏览器这个frame的数据属性。
传统“长轮询”实现Web端即时通讯的问题
WebSocket出现之前,Web端为了实现即时通讯,所用的技术都是Ajax轮询(polling)。轮询是在特定的的时间间隔(如每1秒),由浏览器对服务器发出HTTP request,然后由服务器返回最新的数据给客服端的浏览器。这种传统的HTTP request 的模式带来很明显的缺点 – 浏览器需要不断的向服务器发出请求,然而HTTP request 的header是非常长的,里面包含的数据可能只是一个很小的值,这样会占用很多的带宽。而比较新的技术去做轮询的效果是Comet(是一种被hack出来的基于http长连接的“服务器推”技术,看看这篇文章可以对Comet技术有个直观的了解:《开源Comet服务器iComet:支持百万并发的Web端即时通讯方案》)。但这种技术虽然可达到全双工通信,依然需要发出请求。
WebSocket 技术概览
在 WebSocket API,浏览器和服务器只需要要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送,改变了原有的B/S模式。WebSocket技术应用的典型架构:
WebSocket的技术原理:
浏览器端的websocket 发起的请求一般是:
01 02 03 04 05 06 07 08 09 10 11 | // 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); } |
这个请求是对摸个服务器的端口发送的,一般的话,会预先在服务器将一个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 的结构:
各字段的解释:
1 2 3 4 5 6 7 | FIN1bit 表示信息的最后一帧,flag,也就是标记符 RSV 1-31bit each 以后备用的 默认都为 0 Opcode 4bit 帧类型, Mask1bit 掩码,是否加密数据,默认必须置为1 Payload len 7bit 数据的长度,当这个7 bit的数据 ==126 时,后面的2 个字节也是表示数 据长度,当它 ==127 时,后面的 8 个字节表示数据长度 Masking-key1 or 4 bit 掩码 Payload dataplayload lenbytes 数据 |
根据掩码解析数据的方法是:
1 2 3 | for ( i = 0 ; i < data.length ; i++){ orginalData +=data[i]^maskingKey[i mod 4 ]; } |
01 02 03 04 05 06 07 08 09 10 11 | 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 ; } |
1 2 | 1 是 FIN 000 是三个备用的bit |
可以设置 opcode的值,来告诉浏览器这个frame的数据属性。
相关文章推荐
- [转] websocket新版协议分析+python实现 & websocket 通信协议
- websocket 通信协议(已更新到version 13
- Android的HTTP协议的通信详解
- websocket 通信协议
- socket通信协议关系详解
- websocket 通信协议
- HTTP协议报文、工作原理及Java中的HTTP通信技术详解
- 【unknown】WebSocket:(基于TCP的)通信协议
- CPP-网络/通信:经典HTTP协议详解
- 基于XMPP的即时通信系统的建立(四)— 协议详解
- websocket 通信协议(已更新到version 13
- Java Socket 多线程编程、通信模型及socket协议详解
- WebSocket数据包协议详解
- WebSocket数据包协议详解
- websocket 通信协议(已更新到version 13)
- dhcp 协议重点原理深入详解
- Java Socket多线程编程、通信模型及socket协议详解
- 深入理解Android组件间通信机制对面向对象特性的影响详解
- WebSocket通信协议 API简介
- iOS WebSocket数据包协议详解