直接跳到内容

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 应用
WebSocket已经加载完毕