这篇文章通过抓包分析 WebSocket 协议的细节，学习一下 WebSocket 执行流程。

1.WebSocket 流程说明

• (1)客户端和服务器之间完成三次握手建立 TCP 连接(TLS/SSL)握手。

• (2)客户端发起 HTTP 请求和服务器之间建立 WebSocket 握手。

• (3)WebSocket 连接建立之后，双方通信是基于 TCP 连接的，此后不需要 HTTP 协议了。

• (4)完成 WebSocket 握手之后，就可以发送消息内容了。

2.HTTP 建立 WebSocket 握手(HTTP 升级到 WebSocket)

Tips:其中红色部分为必须，完成如上图所示过程即建立了 WebSocket 连接，Sec-WebSocket-Key: 5C2dTYo3LMpWd/H+Nix4HQ==\r\n 表示建立握手生成的随机串。

2.1 如何证明握手被服务器接受

从上图可以看到构建 WebSocket 握手的时候，发送了一个 Sec-WebSocket-Key，

#请求中的 Sec-WebSocket-Key 随机数Sec-WebSocket-Key:c3SkgVxVCDhVCp69PJFf3A==

#响应中的 Sec-WebSocket-Accept 证明值Sec-WebSocket-Accept:YzgwZjRlZTcxMThiYTdjNDliYzAyNTdmZmNlN2E5MzBmYzNiYTQ0Mg==

2.2 Sec-WebSocket-Accept 证明值构造规则

• GUID(RFC4122)：258EAFA5-E914-47DA-95CA-C5AB0DC85B11

• 值构造规则:BASE64(SHA1(Sec-WebSocket-Key+GUID))

• 拼接值：c3SkgVxVCDhVCp69PJFf3A==258EAFA5-E914-47DA-95CA-C5AB0DC85B11

• SHA1值：c80f4ee7118ba7c49bc0257ffce7a930fc3ba442

• BASE64值：YzgwZjRlZTcxMThiYTdjNDliYzAyNTdmZmNlN2E5MzBmYzNiYTQ0Mg==

2.3 抓包数据

3.消息与数据帧说明

• Message 消息：1 条消息由一个或者多个帧组成，这些数据帧属于同一类型，代理服务器可能合并、拆分消息的数据帧。

• Frame 数据帧：持续帧、文本帧、二进制帧

4.WebSocket 协议格式

4.1 WebSocket 协议的特点

• 基于帧：不是基于流(HTTP、TCP)

• 每一帧要么承载字符数据，要么承载二进制数据

• 基于浏览器的同源策略，可以使用 Access-Control-Allow-Origin 等头部

• 基于 URI、子协议支持同主机同端口上的多个服务

4.2 帧格式示意图

Tips：图中蓝色的 2 字节是必然存在的帧首部。

抓取到的包数据如下图：

Tips：可以在百度搜索 WebSocket 在线测试，然后使用 Wireshark 工具抓取。

4.3 帧类型

从上图抓取到的数据包可以看到帧首部中有 Opcode，它表示 帧类型，下面列出不同类型的帧对应的 Opcode 的值：

• 持续帧：0

• 非控制帧：1：文本帧，2：二进制帧，3-7：为非控制帧保留

• 控制帧：8：关闭帧，9：心跳帧ping，A：心跳帧pong，B-F:为控制帧保留

  Tips：从 3.2 中可以看出 Opcode 的值为 1，表示文本帧。

4.4 MASK 掩码作用

从上面的图中可以看到 WebSocket 每次发送消息的时候帧首部会有MASK 掩码，如下图所示：

Tips：MASK 的作用是为了防止缓存污染攻击，防止伪造 WebSocket 请求。

4.5 ABNF 描述的帧格式

ws-frame = frame-fin;1 bit int length           frame-rsv1;1 bit in length            frame-rsv2;1 bit in length           frame-rsv3;1 bit in length           frame-masked;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

5.如何保持会话心跳

HTTP 长连接是基于定时器维持的会话，若在定时器设置的时间范围内，还没有数据到达，就会自动断开，而 WebSocket 连接保持会话是基于心跳的;

5.1 心跳帧

心跳帧是可以穿插在数据帧中传输的

• ping 帧：Opcode=9，可以含有数据

• pong帧：Opcode=A，必须与 ping 帧数据相同

6.如何关闭 WebSocket 会话

6.1 关闭 WebSocket 会话

• 控制帧中的关闭帧：在 TCP 连接之上的双向关闭。

• 发送关闭帧后，不能再发送任何数据。

• 接收关闭帧之后，不再接收任何到达的数据。

• TCP 连接意外中断也会关闭 WebSocket。

6.2 关闭帧的格式

• 关闭帧：Opcode=8。

• 可以含有数据，但仅用于解释关闭会话的原因，前 2 字节为无符号整型，遵循 mask 掩码规则。

6.3 关闭帧抓包

Tips：从抓包软件中可以看出 TCP 连接是在 WebSocket 关闭之后再关闭的。

6.4 关闭帧的错误码