17370845950

WebSocket是浏览器与服务器间持久化双向通信标准，需用ws://或wss://协议创建实例，监听onopen、onmessage、onerror、onclose事件，支持文本/JSON/二进制收发，并应实现指数退避重连策略。

WebSocket 是浏览器与服务器之间建立持久化双向通信通道的标准方式，相比轮询或长连接更高效、低延迟。要实现实时通信，核心是正确创建 WebSocket 实例并处理连接生命周期。

创建 WebSocket 连接

使用 new WebSocket(url) 即可发起连接，url 必须以 ws://（非加密）或 wss://（加密，推荐）开头，不能用 http:// 或 https://。

• 例如：const ws = new WebSocket("wss://echo.websocket.org");（测试用公共回显服务）
• 若后端运行在本地 Node.js 服务（如用 ws 库），地址可能是 "ws://localhost:8080"
• 连接时可携带参数，如 "wss://api.example.com/chat?user=123"，后端可通过 upgradeReq.url 解析查询字符串

监听关键事件

WebSocket 对象提供多个事件回调，用于响应连接状态变化和收发数据：

• onopen：连接成功建立后触发，此时可立即发送消息
• onmessage：收到服务器推送的消息时触发，event.data 是文本或 Blob/ArrayBuffer
• onerror：连接失败或发生异常时触发（注意：它不表示连接关闭，也不替代 onclose）
• onclose：连接被关闭时触发，event.code 和 event.reason 可帮助判断原因（如 1000 正常关闭，1006 异常断连）

发送与接收数据

WebSocket 默认以文本（UTF-8 字符串）通信，也可传输二进制数据：

• 发送文本：ws.send("hello server")
• 发送 JSON：ws.send(JSON.stringify({ type: "login", userId: 42 }))
• 发送二进制（如 ArrayBuffer）：ws.send(new Uint8Array([1,2,3]).buffer)
• 接收时判断类型：if (typeof event.data === "string") { ... } else if (event.data instanceof Blob) { ... }

连接管理与重连策略

真实场景中网络不稳定，需主动管理连接状态：

• 连接关闭后不要直接复用原实例，应新建 new WebSocket(...)
• 建议实现指数退避重连：首次 1 秒后重试，失败则 2 秒、4 秒、8 秒……上限设为 30 秒
• 用户切换页面或休眠时，可监听 visibilitychange 或 pagehide 事件暂停重连，恢复后再尝试
• 避免频繁重连导致服务端压力，可在后端记录客户端心跳或使用连接令牌校验合法性