WebSocket 是一种基于单个 TCP 连接的全双工通信协议，支持浏览器与服务器间低延迟、高效率的实时双向交互；通过 new WebSocket(url) 建立连接（推荐 wss://），监听 open/message/close/error 事件，手动实现指数退避重连，并注意跨域、数据格式与错误处理。
WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议，能让浏览器和服务器之间建立持久连接，实现低延迟、高效率的实时双向数据交互——不用轮询，不依赖 HTTP 短连接。
建立 WebSocket 连接
浏览器端通过 new WebSocket(url) 发起连接，URL 以 ws://（非加密）或 wss://（加密，推荐）开头。连接成功后触发 open 事件；失败则触发 error 或 close 事件。
- 确保服务端已启用 WebSocket 支持（如 Node.js 的
ws库、Python 的websockets、Java 的 Spring WebFlux/WebSocket） - 连接前检查浏览器兼容性：
'WebSocket' in window（现代浏览器均支持） - 避免跨域问题：服务端需正确设置
Origin校验或允许特定源
发送与接收消息
连接建立后，用 socket.send(data) 向服务端发消息；服务端推送数据时，前端监听 message 事件即可接收。传输的数据可以是字符串或 ArrayBuffer（适合二进制）。
WebSocket 8.18.2
下载
WebSocket 8.18.2 是该协议规范的一个重要迭代版本，主要优化了连接稳定性与数据传输效率。它通过全双工通信机制，允许客户端与服务器在单一长连接上实时交换数据，大幅降低传统 HTTP 轮询的开销。该版本增强了心跳保活、自动重连及二进制帧传输能力，适用于即时通讯、在线游戏及金融行情推送等低延迟场景，为开发者提供更可靠的实时网络交互基础。
- 发送 JSON 数据时需先
JSON.stringify()，接收后用JSON.parse()解析 - 监听
message事件时建议加 try-catch，防止解析失败导致脚本中断 - 避免高频发送：可节流或合并小消息，减少帧开销
处理连接状态与重连
WebSocket 连接可能因网络波动、服务重启等意外断开。不能只依赖自动重连（浏览器不提供），需手动实现健壮的重连逻辑。
- 监听
close事件，记录断开原因（event.code和event.reason） - 采用指数退避策略重连（如首次 1s，失败后 2s、4s、8s…，上限设为 30s）
- 连接恢复后，建议同步一次关键状态（如用户身份、房间信息），避免消息丢失错乱
服务端简单示例（Node.js + ws）
以下是一个最小可用的服务端片段，用于验证通信流程：
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });
wss.on('connection', (ws, req) => {
console.log('客户端已连接');
ws.on('message', (data) => {
console.log('收到:', data.toString());
ws.send(`回声: ${data}`); // 广播给当前连接可改用 wss.clients.forEach()
});
ws.on('close', () => console.log('连接关闭'));
});
前端只需 const socket = new WebSocket('ws://localhost:8080'); 即可对接测试。
