WebSocket 技术全解析：原理、应用与实现

文章目录

- - [一、WebSocket 核心定义](#一、WebSocket 核心定义)
  - [二、WebSocket 核心特性](#二、WebSocket 核心特性)
  - [三、WebSocket 工作原理（核心流程）](#三、WebSocket 工作原理（核心流程）)
  - - [1. 握手阶段（HTTP 升级请求）](#1. 握手阶段（HTTP 升级请求）)
    - [2. 数据传输阶段](#2. 数据传输阶段)
    - [3. 连接关闭阶段](#3. 连接关闭阶段)
  - [四、WebSocket 典型使用场景](#四、WebSocket 典型使用场景)
  - [五、WebSocket 实现方式（客户端 + 服务器端）](#五、WebSocket 实现方式（客户端 + 服务器端）)
  - - [1. 客户端实现（浏览器原生 API）](#1. 客户端实现（浏览器原生 API）)
    - [2. 服务器端实现（主流语言示例）](#2. 服务器端实现（主流语言示例）)
  - [六、WebSocket 与 HTTP/2 Server-Sent Events（SSE）的区别](#六、WebSocket 与 HTTP/2 Server-Sent Events（SSE）的区别)
  - [七、WebSocket 的优缺点](#七、WebSocket 的优缺点)
  - - 优点
    - 缺点
  - 八、安全相关

一、WebSocket 核心定义

WebSocket 是 HTML5 规范定义的全双工、持久化的网络通信协议，运行在 TCP 协议之上，允许客户端（如浏览器）与服务器之间建立长期连接，实现双向实时数据传输。

核心目标：解决 HTTP 协议的局限性 ------HTTP 是 "请求 - 响应" 模式，无状态、单向通信，无法满足实时场景（如聊天、直播）的需求。

二、WebSocket 核心特性

全双工通信：连接建立后，客户端和服务器可同时发送数据，无需等待对方响应（区别于 HTTP 半双工）。
持久连接：一次握手后保持连接，避免 HTTP 频繁建连 / 断连的开销（减少 TCP 三次握手、四次挥手的损耗）。
低开销：

握手阶段基于 HTTP 协议（兼容现有网络架构），后续数据传输无需 HTTP 头，仅含少量帧标识。
数据格式支持文本（UTF-8）和二进制（Blob/ArrayBuffer），灵活适配不同场景。

跨域支持：原生支持跨域通信，无需额外配置（如 CORS），仅需服务器端允许对应域名连接。
状态可感知 ：客户端可通过 readyState 属性实时获取连接状态（连接中、已打开、正在关闭、已关闭）。

三、WebSocket 工作原理（核心流程）

1. 握手阶段（HTTP 升级请求）

客户端发起连接时，先发送 HTTP 升级请求，告知服务器 "希望切换到 WebSocket 协议"：

复制代码

GET /ws-endpoint HTTP/1.1

Host: example.com

Connection: Upgrade  # 核心：请求升级协议

Upgrade: websocket   # 目标协议：WebSocket

Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==  # 随机密钥（客户端生成）

Sec-WebSocket-Version: 13  # 协议版本（主流为 13）

服务器确认支持后，返回 101 Switching Protocols 响应，完成协议升级：

复制代码

HTTP/1.1 101 Switching Protocols

Connection: Upgrade

Upgrade: websocket

Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=  # 密钥验证（服务器计算后返回）

密钥验证逻辑：服务器将客户端的 Sec-WebSocket-Key 与固定字符串 258EAFA5-E914-47DA-95CA-C5AB0DC85B11 拼接，再通过 SHA-1 哈希、Base64 编码得到 Sec-WebSocket-Accept，确保握手合法性。

2. 数据传输阶段

握手成功后，连接转为 WebSocket 协议，数据以 帧（Frame） 为单位传输：

帧结构：包含 opcode（操作码，如文本帧 0x01、二进制帧 0x02、关闭帧 0x08）、掩码位、数据长度、掩码密钥（客户端发送数据必须掩码，服务器返回无需）、 payload（实际数据）。
特点：帧体积小，传输效率高，支持分片传输（大文件拆分多帧发送）。

3. 连接关闭阶段

任意一方可发送 关闭帧（opcode=0x08） 发起关闭请求，对方确认后断开 TCP 连接。
关闭时可携带状态码（如 1000 表示正常关闭、1001 表示客户端离开）和原因描述。

四、WebSocket 典型使用场景

实时通信类：在线聊天（一对一 / 群聊）、即时通讯工具（如网页版微信）。
实时数据推送：

金融行情（股票、加密货币实时价格）；
实时监控（服务器负载、设备状态）；
消息通知（系统公告、订单提醒）。

互动协作类：多人在线编辑（如腾讯文档）、实时白板、在线游戏（实时同步玩家状态）。
流媒体相关：直播弹幕、实时评论、音视频通话（配合 WebRTC 补充媒体流传输）。
高频数据交互：物联网设备数据上报（如传感器实时数据）、实时投票 / 问卷结果统计。

五、WebSocket 实现方式（客户端 + 服务器端）

1. 客户端实现（浏览器原生 API）

无需依赖第三方库，浏览器内置 WebSocket 对象，核心 API 如下：

复制代码

// 1. 建立连接（参数为 WebSocket 服务端地址，协议标识为 ws:// 或 wss://（加密））

const ws = new WebSocket('ws://example.com/ws-endpoint');

// 2. 连接成功回调

ws.onopen = () => {

       console.log('连接已建立');

       // 发送数据（文本/二进制）

       ws.send('Hello WebSocket!'); // 文本

       ws.send(new Blob(\[1, 2, 3])); // 二进制

};

// 3. 接收服务器数据

ws.onmessage = (event) => {

       if (typeof event.data === 'string') {

         console.log('接收文本数据：', event.data);

       } else {

         console.log('接收二进制数据：', event.data); // Blob/ArrayBuffer

       }

};

// 4. 连接错误回调

ws.onerror = (error) => {

       console.error('连接错误：', error);

};

// 5. 连接关闭回调

ws.onclose = (event) => {

       console.log(\`连接关闭，状态码：\${event.code}，原因：\${event.reason}\`);

};

// 6. 主动关闭连接

ws.close(1000, '正常关闭');

2. 服务器端实现（主流语言示例）

WebSocket 服务器需监听端口，处理握手、数据转发、连接管理，以下是常用语言的实现方案：

Node.js ：使用 ws 库（轻量高效）或 Socket.io（封装更完善，支持降级兼容）

// 基于 ws 库的简单服务器

const WebSocket = require('ws');

const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', (ws) => {

复制代码

     console.log('客户端连接成功');

     // 接收客户端数据

     ws.on('message', (message) => {

       console.log('收到消息：', message);

       // 广播给所有连接的客户端

       wss.clients.forEach((client) => {

         if (client.readyState === WebSocket.OPEN) {

           client.send(\`服务器转发：\${message}\`);

         }

       });

     });

     // 客户端断开连接

     ws.on('close', () => {

       console.log('客户端断开连接');

     });

});

Java ：使用 Java WebSocket API（JSR 356） 或 Spring WebSocket
Python ：使用 websockets 库
Go ：标准库 net/http 结合 golang.org/x/net/websocket

六、WebSocket 与 HTTP/2 Server-Sent Events（SSE）的区别

特性	WebSocket	SSE（Server-Sent Events）
通信方向	全双工（双向）	半双工（服务器→客户端）
数据格式	文本 / 二进制	仅文本（UTF-8）
连接限制	单域名可建立多个连接	单域名默认 6 个连接限制
兼容性	现代浏览器支持（IE 不支持）	兼容性更好（IE 需 polyfill）
适用场景	双向实时交互（聊天、游戏）	单向数据推送（公告、行情）

七、WebSocket 的优缺点

优点

实时性强：全双工通信，数据传输延迟低（毫秒级）。
性能优异：持久连接减少建连开销，数据帧体积小，带宽利用率高。
原生跨域：无需额外配置，适配分布式系统。
浏览器原生支持：无需依赖插件，开发成本低。

缺点

兼容性局限：不支持 IE 浏览器（需通过 Socket.io 降级为长轮询）。
服务器压力：持久连接会占用服务器资源，高并发场景需优化（如连接池、集群部署）。
网络限制：部分防火墙 / 代理可能拦截 WebSocket 连接（需使用 wss:// 加密协议规避）。
断开重连：需手动处理网络波动导致的断开，需实现重连机制（如 exponential backoff 策略）。

八、安全相关

加密协议：使用 wss://（WebSocket Secure）替代 ws://，基于 TLS 加密传输，防止数据被窃听或篡改（类似 HTTPS 与 HTTP 的关系）。
身份验证：握手阶段可通过 HTTP 头传递 Token（如 Authorization: Bearer xxx），服务器验证通过后再建立连接。
权限控制：服务器端需校验客户端身份，限制非法连接接入。