外观
WebSocket
介绍
WebSocket 是 HTML5 提供的一种在单个 TCP 连接上进行全双工通信的协议。它实现了客户端与服务端之间的双向实时数据交换,解决了传统 HTTP 协议在实时通信场景下的效率问题。WebSocket 协议通过一次 HTTP 握手建立连接,之后通信双方即可随时互相推送数据,显著减少了网络延迟和不必要的数据交换。
历史
WebSocket 协议的产生源于 Web 应用对实时通信能力日益增长的需求。在 WebSocket 出现之前,开发者通常使用 AJAX 轮询或长轮询等技术模拟实时通信,但这些方案存在效率低下、资源消耗大、数据实时性差等问题。2011 年,IETF (互联网工程任务组) 发布了 RFC 6455,正式标准化了 WebSocket 协议。随着 HTML5 的推广和主流浏览器的支持,WebSocket 已成为 Web 实时通信的基石技术。
协议概述
WebSocket 是一种独立的基于 TCP 的协议,但与 HTTP 有良好的兼容性。它使用 ws (非加密) 和 wss (加密) 作为 URL 方案,默认分别占用 80 和 443 端口。WebSocket 连接建立需要一次 HTTP 升级握手,之后客户端和服务器便可以在单个持久连接上自由交换数据。
HTTP 请求-响应: 客户端 -> 请求 -> 服务器 -> 响应 -> 客户端 (循环)
WebSocket 全双工: 客户端 <--> 服务器 (持久连接,双向通信)核心特点
全双工通信
WebSocket 允许客户端和服务器同时独立地发送和接收数据,这与 HTTP 的半双工模式 (必须等待请求才能响应) 形成鲜明对比。
HTTP: 客户端请求 -> 服务器响应 -> 客户端请求 -> ... (单向交替)
WebSocket: 客户端 <-> 服务器 (同时双向)持久连接
一旦 WebSocket 连接建立,它将一直保持打开状态,直到显式关闭。这消除了传统 HTTP 短连接反复建立和断开带来的开销。
HTTP: 连接 -> 请求 -> 响应 -> 断开 (每次交互)
WebSocket: 连接 -> 保持 -> 数据传输 -> ... -> 手动关闭低延迟与轻量开销
WebSocket 在建立连接后,数据传输使用轻量级的帧结构,头部开销极小 (仅 2-14 字节)。数据一旦可用就立即发送,无需客户端重复请求,显著降低了通信延迟。
基于帧的传输
WebSocket 采用二进制帧格式传输数据。每个帧包含操作码、掩码、数据长度和载荷等核心字段,支持文本、二进制数据等多种数据类型。
双向实时性
服务器可以主动向客户端推送信息,客户端也能随时向服务器发送数据,这使得 WebSocket 非常适合实时性要求高的应用。
工作原理
连接握手
WebSocket 连接始于一个特殊的 HTTP 升级请求:
客户端请求:
GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket # 请求协议升级
Connection: Upgrade # 指示升级连接
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ== # 随机密钥
Sec-WebSocket-Version: 13 # 协议版本
服务器响应:
HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo= # 验证响应握手成功后,底层 TCP 连接被复用,后续通信脱离 HTTP 协议。
数据传输
握手完成后,数据通过 WebSocket 帧进行传输。帧结构精简,主要包含:
- 操作码:区分数据类型 (文本、二进制、关闭帧、Ping/Pong 等)
- 载荷长度:数据长度指示
- 掩码:客户端到服务器的帧需要掩码处理
- 数据载荷:实际传输内容
连接维护
WebSocket 通过 Ping/Pong 心跳机制保持连接活跃。服务器定期发送 Ping 帧,客户端回应 Pong 帧,若超时未收到响应则判定连接失效。任何一方都可以发送关闭帧 (操作码 0x08) 来正常终止连接。
数据帧格式
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| | |
+-+-+-+-+-------+-+-------------+ - - - - - - - - - - - - - - - +
| Extended payload length continued, if payload len == 127 |
+ - - - - - - - - - - - - - - - +-------------------------------+
| |Masking-key, if MASK set to 1 |
+-------------------------------+-------------------------------+
| Masking-key (continued) | Payload Data |
+-------------------------------- - - - - - - - - - - - - - - - +
: Payload Data continued ... :
+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
| Payload Data continued ... |
+---------------------------------------------------------------+关键字段说明:
- FIN:标识是否为消息的最后一帧
- 操作码:定义数据类型 (0x1=文本,0x2=二进制,0x8=关闭连接等)
- Mask:指示是否使用掩码
- Payload length:数据载荷长度
适用场景
即时通讯系统
网页版微信、企业微信、在线客服等需要实时收发消息的应用。WebSocket 能保证消息的即时性和低延迟。
实时协作工具
腾讯文档、飞书文档等多人协作编辑场景,需要实时同步光标位置和内容变更。
金融与行情更新
股票、期货等实时行情数据系统,每秒可能需要多次更新,WebSocket 推送比轮询更高效。
在线游戏
网页版多人在线游戏 (如联机贪吃蛇),需要实时同步玩家操作和游戏状态。
实时监控系统
物联网设备监控、服务器性能监控等场景,需要持续接收设备或服务器推送的状态数据。
与 HTTP 对比
通信模式差异
HTTP:
客户端 -> [请求] -> 服务器
客户端 <- [响应] <- 服务器
(循环,每次请求都需要建立连接)
WebSocket:
客户端 -> [握手] -> 服务器
客户端 <- [确认] <- 服务器
客户端 <-> 服务器 (持久双向通信)性能优势
与传统 HTTP 轮询相比,WebSocket 具有显著性能优势:
- 减少网络开销:避免重复的 HTTP 头部和连接建立
- 降低延迟:服务器数据立即可推送,无需等待客户端请求
- 提升吞吐量:轻量级帧结构支持更高频率的数据交换
技术选型考量
- 选择 WebSocket:需要低延迟双向通信、服务器主动推送、高频数据交换的场景
- 选择 HTTP:简单请求-响应、资源缓存、兼容性要求高的传统 Web 应用