WebSocket是浏览器与服务器间持久化双向通信协议，高效低延迟，适用于实时场景；需正确建连、监听onopen/onmessage/onerror/onclose事件、检查readyState发送消息、并实现重连与心跳机制保障稳定性。
WebSocket 是浏览器与服务器之间建立持久化双向通信的协议，相比传统 HTTP 轮询，它更高效、低延迟，特别适合实时数据推送场景（如聊天、行情、通知、协同编辑等）。实现关键在于正确创建连接、监听事件、处理消息，并做好异常恢复。
一、建立 WebSocket 连接
使用 new WebSocket(url) 初始化连接，URL 必须以 ws://（非加密）或 wss://（加密，推荐）开头：
const ws = new WebSocket('wss://api.example.com/realtime');
连接状态通过 ws.readyState 判断：
0 → CONNECTING（正在连接）
1 → OPEN（已就绪，可收发）
2 → CLOSING（关闭中）
3 → CLOSED（已关闭）
二、监听核心事件
必须绑定以下四个事件，缺一不可：
- onopen：连接成功后触发，此时可发送首次认证消息或订阅指令
- onmessage：收到服务器推送的数据，event.data 是字符串或 Blob，通常需 JSON.parse()
- onerror：发生网络错误或非法操作时触发（注意：它不表示连接断开，仅表操作失败）
- onclose：连接关闭时触发，event.code 和 event.reason 可辅助诊断原因
三、发送与接收实时数据
发送前务必检查连接状态：
立即学习“Java免费学习笔记（深入）”；
if (ws.readyState === WebSocket.OPEN) {
ws.send(JSON.stringify({ type: 'subscribe', channel: 'stock-btc-usd' }));
}
接收端建议统一解析逻辑：
ws.onmessage = (event) => {
try {
const data = JSON.parse(event.data);
if (data.type === 'tick') handleTick(data.payload);
else if (data.type === 'error') console.warn('Server error:', data.message);
} catch (e) {
console.error('Invalid JSON received:', event.data);
}
};
四、保障连接稳定性
真实环境中网络波动常见，需主动管理重连和心跳：
- 监听 onclose 后启动指数退避重连（如 1s、2s、4s… 最大 30s）
- 客户端定时用 ws.ping 或发自定义 ping/pong 消息检测连接活性（注意：原生 WebSocket 不暴露 ping/pong API，需服务端配合或改用自定义心跳包）
- 页面卸载前调用 ws.close() 避免资源泄漏
- 对重复消息、乱序消息做业务层去重或序列号校验（尤其在金融类场景）
不复杂但容易忽略。
