WebSocket 协议介绍

当然可以咱们从最基础讲起我给你一个面向嵌入式或者刚入门的新人也能理解的 WebSocket 协议介绍。1️⃣ WebSocket 是什么WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议。全双工意味着服务器和客户端可以随时互相发送消息不需要客户端每次都发请求。基于 TCP所以有可靠的传输保证不会丢包相比 UDP 的不可靠传输。简单类比HTTP就像你每次想说话都要敲门请求然后等人回答。WebSocket就像你们开了一条电话线随时能讲随时能听。2️⃣ WebSocket 的工作流程握手Handshake客户端通过 HTTP 请求发起握手GET /chat HTTP/1.1并带上Upgrade: websocket和Connection: Upgrade。服务器收到请求后如果支持 WebSocket会回应 101 Switching Protocols表示协议切换成功。建立连接握手成功后TCP 连接不关闭而是切换到 WebSocket 协议。从此客户端和服务器可以随时互相发送消息。数据传输数据以帧Frame为单位发送可以是文本帧或二进制帧。服务器和客户端可以同时发送数据不必轮流全双工。关闭连接任意一方可以发送关闭帧Close Frame关闭连接。3️⃣ WebSocket 数据帧结构简介WebSocket 的数据帧比 HTTP 简单主要字段包括字段说明FIN是否是消息的最后一帧Opcode类型文本、二进制、关闭、ping/pong 等Mask是否对数据进行掩码客户端必须掩码Payload length数据长度Payload data真正发送的消息数据举例文本消息hello会被封装成一帧发送。二进制数据比如图像、音频也可以通过帧发送。4️⃣ WebSocket 的优点实时性强不用频繁建立 HTTP 请求。节省带宽只传数据不传 HTTP 头。全双工通信客户端和服务器都能随时发消息。适合长连接比如聊天系统、实时监控、IoT 设备。5️⃣ 简单应用案例假设你在做嵌入式温湿度采集设备设备连接到 Wi-Fi然后建立 WebSocket 到服务器。服务器随时可以向设备发命令比如“开始采集”、“停止采集”。设备采集数据后也可以随时推送到服务器。由于是长连接延迟很低实时性好。6️⃣ 小结WebSocket HTTP 协议升级 长连接 全双工通信适合实时数据传输尤其是 IoT、聊天应用、游戏、金融行情推送。如果你需要我可以帮你画一个WebSocket 握手 数据传输完整流程图让你一眼就能看懂客户端和服务器的数据流。你希望我画吗太好了我给你画一个清晰的 WebSocket握手 数据传输流程图分客户端和服务器两条线标注关键帧和步骤。这里我用文字图的形式描述你可以直接理解或者照着画成图客户端(Client) 服务器(Server) | | |———HTTP GET 请求带 Upgrade: websocket———| | GET /chat HTTP/1.1 | | Host: example.com | | Upgrade: websocket | | Connection: Upgrade | | Sec-WebSocket-Key: 随机值 | | Sec-WebSocket-Version: 13 | | | |——101 Switching Protocols 响应——————————| | HTTP/1.1 101 Switching Protocols | | Upgrade: websocket | | Connection: Upgrade | | Sec-WebSocket-Accept: 计算值 | | | |———WebSocket 连接建立成功———————————————| | | |——————————服务器可以发送消息———————————| | | |———客户端可以发送消息———————————————| | | |———服务器发送 ping/pong 帧保持连接———| | | |———客户端发送关闭帧 Close Frame ———————| | | |———服务器响应关闭帧 Close Frame ————| | | |———连接关闭———————————————————————|流程解读HTTP 握手客户端先用 HTTP 请求和服务器打招呼并说“我想升级成 WebSocket”。服务器确认后返回 101 Switching Protocols。WebSocket 连接建立握手成功后TCP 长连接持续存在。连接可用来双向发送消息。数据传输客户端和服务器随时可以发送文本或二进制帧。也可以用 ping/pong 保活防止长连接断开。关闭连接任意一方发送 Close Frame另一方响应连接优雅关闭。小提示客户端发送的每一帧都必须Mask服务器发送的不用。数据可以是任意长度分多帧发送也可以。如果你愿意我可以帮你画一个带消息帧详细标注文本/二进制/close/ping的更“可视化”的流程图这样看起来就像真正的时序图非常适合嵌入式开发理解数据流。你想让我画这个吗没问题我们重点来看WebSocket 的数据帧格式这是理解它如何在客户端和服务器间传输数据的核心。咱们拆开讲尽量详细但又容易理解。1️⃣ WebSocket 帧Frame概念WebSocket 传输的数据不是直接丢过去的而是被封装成帧。每一帧包含头信息和有效载荷Payload。文本帧Text Frame通常用于发送字符串数据比如hello二进制帧Binary Frame用于发送二进制数据比如音频、图像、传感器数据控制帧Control Frame用于 ping/pong 保活、关闭连接等2️⃣ 帧结构总览一个 WebSocket 帧的结构如下字节级别字段长度说明FIN1 bit是否是消息的最后一帧。1 表示最后一帧0 表示还有后续帧RSV1/RSV2/RSV31 bit each保留位一般为 0除非使用扩展协议Opcode4 bits操作码表示帧类型Mask1 bit是否对 Payload 做掩码客户端必须为 1服务器为 0Payload length7/716/764 bits数据长度分三种情况0-125, 126-65535, 65535Masking key32 bits (4 bytes, 可选)如果 Mask 1则用于对 Payload 做掩码Payload data可变真正的数据内容3️⃣ Opcode操作码操作码决定帧的类型Opcode类型说明0x0continuation延续帧多帧消息0x1text文本帧UTF-8 字符串0x2binary二进制帧图片、音频、传感器数据0x8close关闭帧0x9pingping 控制帧服务器或客户端用来检查连接0xApongpong 控制帧对 ping 的回应4️⃣ Payload 长度编码Payload length 7 位表示0–125直接表示长度126后面 2 字节表示实际长度16 位127后面 8 字节表示实际长度64 位例子文本hello长度 5 → Payload length 5二进制数据 200 字节 → Payload length 126 后面 2 字节表示 2005️⃣ Masking客户端发送给服务器的数据必须加掩码Mask 1方法maskedPayload[i] payload[i] XOR maskingKey[i % 4]服务器接收到后用同样算法解码即可。服务器发送给客户端时不需要掩码Mask 0。6️⃣ 控制帧示例Close Frame客户端或服务器发起关闭连接Ping / Pong保活连接、测延迟例如客户端发送一个 PingFIN1, Opcode0x9, Mask1, Payloadping服务器收到后回应 PongFIN1, Opcode0xA, Mask0, Payloadping7️⃣ 文本帧示例“Hi”假设客户端发送HiUTF-8 2 字节字节说明0x81FIN1, Opcode1文本0x82Mask1, Payload length20x12 0x34 0x56 0x78Masking key随机0x4A 0x2BPayload (HiXOR Masking key)服务器收到后解码得到Hi。总结要点WebSocket 帧由头 可选掩码 数据构成Opcode 决定帧类型文本、二进制、控制FIN 决定消息是否结束客户端必须 Mask服务器可不 MaskPayload 可分多帧发送支持大数据传输如果你愿意我可以帮你画一个WebSocket 帧结构图直观显示 FIN、Opcode、Mask、Payload 长度、Masking key、Payload 的字节布局看起来就像内存图很适合嵌入式开发理解数据封包。你希望我画吗