WebSocket 详解

WebSocket

WebSocket 是一种支持双向通讯网络通信协议。

意思就是服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息

属于服务器推送技术的一种.特点：

（1）建立在 TCP 协议之上，服务器端的实现比较容易。

（2）与 HTTP 协议有着良好的兼容性。默认端口也是80和443，并且握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器。

（3）数据格式比较轻量，性能开销小，通信高效。

（4）可以发送文本，也可以发送二进制数据（blob对象或Arraybuffer对象）

（5）收到的数据类型 可以使用binaryType 指定， 显式指定收到的二进制数据类型

（6）没有同源限制，客户端可以与任意服务器通信。

（7）协议标识符是ws（握手http）（如果加密，则为wss（tcp +TLS)），服务器网址就是 URL。WebSocket对象

WebSocket对象提供了用于创建和管理WebSocket 连接，以及可以通过该连接发送和接收数据的 API。

使用 WebSocket() 构造函数来构造一个 WebSocket 。为什么需要websocketHypertext Transfer Protocol (HTTP) 协议

一种无状态的、应用层的、以请求/应答方式运行的协议，它使用可扩展的语义和自描述消息格式，与基于网络的超文本信息系统灵活的互动.

因为http 通信只能由客户端发起,服务器返回查询结果,HTTP 协议做不到服务器主动向客户端推送信息,服务器有连续的状态变化，客户端要获知就非常麻烦。

我们只能使用轮询：每隔一段时候，就发出一个询问，了解服务器有没有新的信息。最典型的场景就是聊天室。

轮询的效率低，非常浪费资源（因为必须不停连接，或者 HTTP 连接始终打开）;

Chrome 请求列表：分析 WebSocket过滤器(过滤资源xhr js ws css ws等)：

按照类型： ws

属性过滤： is：running

表格列 Frames

Data: 消息负载。 如果消息为纯文本，直接显示。 二进制操作吗显示操作码名称和代码（Continuation Frame、 Binanry Frame、 Connection Close Frame、 Ping Frame或者Pong Frame）

Length: 消息负载的长度 以字节为单位

Time: 收到或者发送的时间。消息颜色

发送到服务器的文本消息为浅绿色

接收到的文本消息为白色

WebSocket 操作码 为浅黄色

错误为浅红色

WbeSocket 的成本 对比http

1、实时性与可伸缩性。牺牲了简单性。

2、网络效率与无状态： 请求1基于请求2牺牲了简单性与可见性

websocket 的心跳保持 对比http

（http 长连接只能基于简单的超时（常见为65s））

websocket 链接基于ping/pong 心跳机制维持设计哲学： 在web约束下暴露tcp 给上层元数据

http 协议头部会存放元数据.

websocket 上传输的应用层存放元数据基于帧： 不是基于字节流（http, tcp）

每一帧要么存放字符数据，要么承载二进制数据基于浏览器的同源策略模型个（非浏览器无效）

可以使用Access-Control-Allow-Origin 等头部基于URI、子协议支持同主机``同端口上的多个服务帧格式示意图ABNF 描述的帧格式

ws-frame = frame-fin ; 1 bit in length

frame-rsv1 ; 1 bit in length

frame-rsv2 ; 1 bit in length

frame-rsv3 ; 1 bit in length

frame-opcode ; 4 bits in length

frame-**sked ; 1 bit in length

frame-payload-length ; 3 种长度

[ frame-masking-key ] ; 32 bits in length

frame-payload-data ; n*8 bits in ; length, where ; n >= 0

红色: 2 字节必然存在的帧首部

数据帧格式： Rsv 保留值

RSV1/RSV2/RSV3：默认为 0，仅当使用 extension 扩展时，由扩展决定其值

数据帧格式：帧类型

持续帧

0: 继续前一帧

非控制帧

1： 文本帧（utf-8）

2：二进制帧

3-7: 为非控制帧保留

控制帧8: 关闭帧9: 心跳帧pingA: 心跳帧pongB-F:控制帧保留URI 格式

1、ws-uri: ws://[host][:port][path][?query]

端口port默认 80

2、wss-uri: wss://[host][:port][path][?query]端口port 默认443客户端提供信息

host、port 主机端口

sche**: 是否基于SSL

访问的资源：uri

握手随机数：Sec-WebSocket-Key

选择的子协议：Sec-WebSocket-Protocol

扩展协议：Sec-WebSocket-Extensions

CORS：Origin

如何证明握手被服务器接受？预防意外

请求中的 Sec-WebSocket-Key 随机数

Sec-WebSocket-Key: A1EEou7Nnq6+BBZoAZqWlg==

响应中的 Sec-WebSocket-Accept 证明值

GUID（RFC4122）：258EAFA5-E914-47DA-95CA-C5AB0DC85B11

? 值构造规则：BASE64(SHA1(Sec-WebSocket-Key + GUID))

? 拼接值：A1EEou7Nnq6+BBZoAZqWlg==258EAFA5-E914-47DA-95CA-C5AB0DC85B11

? SHA1 值：713f15ece2218612fcadb1598281a35380d1790f

? BASE 64 值：cT8V7OIhhhL8rbFZgoGjU4DReQ8=

? 最终头部：Sec-WebSocket-Accept: cT8V7OIhhhL8rbFZgoGjU4DReQ8=