解剖WebSocket：像拆盲盒一样，一层一层剥开它的心
话说程序员的世界，就像一个大型的玩具工厂，每天都在生产各种各样的“玩具”。这些玩具，有的负责让网页动起来，有的负责帮你存储数据，还有的负责让不同的程序之间“聊天”。今天要聊的WebSocket，就是一种特别擅长“聊天”的玩具。
你可能听过HTTP，它就像一个邮递员，你发一个请求，它送一个包裹，然后就各回各家，各找各妈。但是，如果你们需要频繁地聊天，比如在线游戏、实时股票信息、聊天室，那HTTP就显得力不从心了。这时候，WebSocket就闪亮登场了。
WebSocket就像一个长期在线的客服，一旦建立连接，你就可以随时跟他说话，他也会随时回复你，不用每次都重新发起请求。是不是很方便？
但是，今天我们不光要了解WebSocket是什么，还要像拆盲盒一样，一层一层剥开它的心，看看它到底是怎么工作的，以及如何手动解析和构建它的数据帧，这样我们就能更灵活地使用它，甚至定制自己的通信协议。
为什么要手动解析和构建WebSocket帧？
你可能会问，现在都有那么多WebSocket的库，为什么还要自己动手呢？这就像有了汽车，为什么还要学习修车一样。
- 更深入的理解： 只有了解了底层原理，才能更好地理解WebSocket的工作方式，避免踩坑。
- 更灵活的控制： 使用现成的库虽然方便，但也限制了你的自由。手动解析和构建可以让你根据自己的需求定制通信协议，比如添加加密、压缩等功能。
- 更好的性能： 对于一些性能敏感的应用，手动优化WebSocket帧的结构可以提高通信效率。
- 面试装逼利器： 面试的时候，如果你能侃侃而谈WebSocket的底层原理，那绝对能给面试官留下深刻的印象。
WebSocket帧的结构：一个精巧的俄罗斯套娃
WebSocket的数据是以帧（Frame）为单位传输的。每个帧都包含一些头部信息和有效载荷（Payload）。你可以把帧想象成一个精巧的俄罗斯套娃，一层套一层，每一层都包含了不同的信息。
让我们一层一层地剥开这个“套娃”，看看里面都藏了什么秘密。
一个典型的WebSocket帧结构如下：
0 1 2 3
0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1
+-+-+-+-+-------+-+-------------+-------------------------------+
|F|R|R|R| opcode|M| Payload len | Extended payload length |
|I|S|S|S| (4) |A| (7) | (16/64) |
|N|V|V|V| |S| | (if payload len==126/127) |
| |1|2|3| |K| | |
+-+-+-+-+-------+-+-------------+-------------------------------+
| | Masking-key, if MASK set to 1 |
+-------------------------------+-------------------------------+
| Masking-key (continued) | Payload Data |
+---------------------------------------------------------------+
: Payload Data continued ... :
+---------------------------------------------------------------+
| Payload Data continued ... |
+---------------------------------------------------------------+是不是看起来有点复杂？别怕，让我们逐个字段来解释：
- FIN (1 bit): 标志着这是消息的最后一帧。如果消息被分成多个帧发送，只有最后一帧的FIN位会被设置为1。你可以把它想象成一个句号，表示一句话说完了。
- RSV1, RSV2, RSV3 (各 1 bit): 用于扩展协议。通常情况下，这三个位都设置为0。就像汽车上的预留接口，以后可以用来加装各种设备。
- Opcode (4 bits): 定义了有效载荷数据的类型。常见的Opcode有：
0x0: Continuation Frame（延续帧，用于分片消息）0x1: Text Frame（文本帧，用于发送文本数据）0x2: Binary Frame（二进制帧，用于发送二进制数据）0x8: Connection Close Frame（关闭连接帧，用于关闭WebSocket连接）0x9: Ping Frame（Ping帧，用于心跳检测）0xA: Pong Frame（Pong帧，用于响应Ping帧）
- MASK (1 bit): 标志着有效载荷数据是否被掩码。如果设置为1，则表示数据被掩码，客户端发送给服务器的数据必须进行掩码处理，服务器发送给客户端的数据则不需要。
- Payload Length (7 bits): 定义了有效载荷数据的长度。
- 如果值为0-125，则表示有效载荷数据的实际长度。
- 如果值为126，则表示接下来的2个字节表示有效载荷数据的实际长度（16位无符号整数）。
- 如果值为127，则表示接下来的8个字节表示有效载荷数据的实际长度（64位无符号整数）。
- Extended Payload Length (16/64 bits): 当Payload Length为126或127时，用于表示有效载荷数据的实际长度。
- Masking-key (32 bits): 用于掩码有效载荷数据。只有当MASK位设置为1时，才需要Masking-key。
- Payload Data: 实际的有效载荷数据。
手动解析WebSocket帧：像侦探一样寻找线索
现在我们已经了解了WebSocket帧的结构，接下来就可以尝试手动解析它了。解析WebSocket帧就像侦探破案一样，需要根据帧的头部信息，一步步地找到隐藏在其中的有效载荷数据。
假设我们收到一个WebSocket帧，它的十六进制表示如下：
81 85 37 fa 21 3d 25 5b 1a 11 3b 3e 08 1a 06 01 08 0a让我们来一步一步地解析它：
-
解析第一个字节：81
- 最高位FIN为1，表示这是消息的最后一帧。
- Opcode为0x1，表示这是一个文本帧。
-
解析第二个字节：85
- MASK为1，表示数据被掩码。
- Payload Length为0x5（5），表示有效载荷数据的长度为5个字节。
-
解析接下来的4个字节：37 fa 21 3d
- 这是Masking-key。
-
解析接下来的5个字节：25 5b 1a 11 3b
- 这是被掩码的有效载荷数据。
-
解掩码有效载荷数据
- 使用Masking-key对有效载荷数据进行异或运算，就可以得到原始数据。
Masking-key: 37 fa 21 3d Masked data: 25 5b 1a 11 3b Unmasked data: 25 ^ 37 = 12 (0x0c) 5b ^ fa = a1 (0x61) 1a ^ 21 = 3b (0x27) 11 ^ 3d = 2c (0x1c) 3b ^ 37 = 0c (0x04)所以，原始数据为：0c 61 27 1c 04。
如果将这些字节转换为字符，可能会得到一些乱码，因为这只是一个示例。
手动构建WebSocket帧：像搭积木一样创造惊喜
了解了如何解析WebSocket帧，接下来就可以尝试手动构建它了。构建WebSocket帧就像搭积木一样，需要根据自己的需求，选择合适的头部信息，然后将有效载荷数据组装起来。
假设我们要发送一个文本消息 "Hello, WebSocket!"。
-
确定Opcode： 因为要发送的是文本消息，所以Opcode应该设置为0x1。
-
确定Payload Length： "Hello, WebSocket!" 的长度是17个字节。
-
确定MASK： 假设我们是从服务器发送给客户端，不需要掩码，所以MASK设置为0。
-
构建帧头部：
- 第一个字节：FIN设置为1，Opcode设置为0x1，所以第一个字节为0x81。
- 第二个字节：MASK设置为0，Payload Length设置为17，所以第二个字节为0x11。
-
组装有效载荷数据： 将 "Hello, WebSocket!" 转换为字节数组。
-
将帧头部和有效载荷数据组装起来：
最终的WebSocket帧的十六进制表示如下：
81 11 48 65 6c 6c 6f 2c 20 57 65 62 53 6f 63 6b 65 74 21其中：
81：帧头部11：帧头部48 65 6c 6c 6f 2c 20 57 65 62 53 6f 63 6b 65 74 21： "Hello, WebSocket!" 的字节数组
代码示例：用Python实现WebSocket帧的解析和构建
光说不练假把式，让我们用Python来实现WebSocket帧的解析和构建。
import struct
def parse_websocket_frame(data):
"""解析WebSocket帧"""
fin = (data[0] >> 7) & 0x1
opcode = data[0] & 0xf
mask = (data[1] >> 7) & 0x1
payload_len = data[1] & 0x7f
payload_offset = 2
if payload_len == 126:
payload_len = struct.unpack("!H", data[2:4])[0]
payload_offset = 4
elif payload_len == 127:
payload_len = struct.unpack("!Q", data[2:10])[0]
payload_offset = 10
masking_key = None
if mask:
masking_key = data[payload_offset:payload_offset + 4]
payload_offset += 4
payload_data = data[payload_offset:payload_offset + payload_len]
if mask:
unmasked_payload = bytearray()
for i in range(len(payload_data)):
unmasked_payload.append(payload_data[i] ^ masking_key[i % 4])
payload_data = bytes(unmasked_payload)
return fin, opcode, payload_data
def build_websocket_frame(message, opcode=0x1):
"""构建WebSocket帧"""
payload = message.encode('utf-8')
payload_len = len(payload)
# 帧头部
header = bytearray()
header.append(0x80 | opcode) # FIN设置为1
if payload_len <= 125:
header.append(payload_len)
elif payload_len <= 65535:
header.append(126)
header.extend(struct.pack("!H", payload_len))
else:
header.append(127)
header.extend(struct.pack("!Q", payload_len))
# 组装帧
frame = header + payload
return bytes(frame)
# 示例
message = "Hello, WebSocket!"
frame = build_websocket_frame(message)
print("构建的帧:", frame.hex())
fin, opcode, payload_data = parse_websocket_frame(frame)
print("解析后的数据:", payload_data.decode('utf-8'))这段代码实现了WebSocket帧的解析和构建，你可以把它复制到你的Python环境中运行，看看效果。
总结：WebSocket，不止是聊天工具
通过今天的学习，我们了解了WebSocket的底层原理，学会了手动解析和构建WebSocket帧。现在，你不仅可以更好地理解WebSocket的工作方式，还可以根据自己的需求定制通信协议，让你的程序之间的“聊天”更加高效、安全、灵活。
记住，WebSocket不仅仅是一个聊天工具，它更是一种强大的通信技术，可以应用于各种实时应用场景。希望你能灵活运用它，创造出更多有趣的应用。
最后，记住一句程序员的座右铭：永远不要停止学习，永远不要停止探索。 就像拆盲盒一样，只有不断地拆解、分析，才能发现更多的惊喜！