websocket需手动实现重连机制，关键包括：onclose须在readystate=0时用addeventlistener绑定；采用指数退避（起始1s、倍率1.6、上限30s）并设最大重试次数；结合心跳（25s ping/15s pong超时）与连接标识防消息混乱；所有send前校验readystate===open且匹配_ws._id。
WebSocket 在 HTML 中没有内置重连机制，必须手动实现；否则网络切换、锁屏、NAT 超时等常见场景下连接会静默失效，用户收不到消息也不知情。
onclose 不触发？检查监听器绑定时机和方式
很多重连逻辑“看似写了却没生效”，根源是 onclose 监听器没绑对地方：它必须在 new WebSocket() 之后、且 readyState 还是 0（CONNECTING）时就绑定，否则初始握手失败（如 401/403）可能直接跳过 onclose。
- 别用
ws.onclose = function() {...}反复赋值——后一次会覆盖前一次，尤其重连时容易漏掉事件 - 改用
ws.addEventListener('close', handler)，更安全，支持多次注册 -
onerror不可靠：它常不带具体错误信息，且可能被频繁触发（比如 DNS 解析中连续触发），不适合作为主判据 - 真正可信的断开信号是
onclose中event.wasClean === false或event.code === 1006（异常关闭）
指数退避重连怎么写才不卡死或压垮服务端
无脑 setTimeout(connect, 1000) 在弱网抖动时会瞬间发起几十次连接请求，客户端内存涨、服务端连接数爆、甚至触发限流。关键不是“快”，而是“稳”。
- 起始延迟建议
1000ms，每次失败后乘以1.6（比 ×2 更平滑），上限硬设为30000ms（30 秒） - 必须设最大重试次数，比如
maxRetries = 5；达到后停止自动重连，等用户点击“重试”或online事件唤醒 - 每次调用
connect()前，先clearTimeout(this.reconnectTimer)，避免旧定时器在新连接成功后误执行 - 重连前检查
document.hidden：页面在后台（App 切到后台、手机锁屏）时暂缓重连，省电也避免无效连接
心跳保活为什么不能只靠 TCP keep-alive
TCP 层的 keep-alive 默认超时长达 2 小时，而移动端 NAT、运营商代理、Wi-Fi 睡眠策略往往在 30–90 秒就切断空闲连接——此时 WebSocket 实例 readyState 还是 OPEN，但发包已失败，onclose 却迟迟不触发。
- 客户端每
25000ms 主动发一次{type: 'ping'}，服务端收到立刻回{type: 'pong'} - 用
setTimeout启动一个pongTimeout计时器（比如15000ms），若未收到pong就ws.close(4999, 'no pong')，强制走重连流程 - 心跳检测要和重连控制器联动：触发重连前，先清除当前心跳定时器，避免新旧连接共存时互相干扰
- 重连成功后，建议发一条带唯一
sessionId的{type: 'reconnect'}消息，让服务端恢复上下文（如房间状态、未读标记）
重连后消息重复或丢失？readyState 和连接标识缺一不可
重连完成不等于“能用了”。刚 new 出来的 WebSocket 实例，readyState 可能还是 0（CONNECTING）或 2（CLOSING），此时调用 send() 会静默失败；更麻烦的是，旧连接可能还在收包，新旧消息混在一起处理，业务逻辑就乱了。
- 所有发送操作前必须加判断：
if (ws.readyState === WebSocket.OPEN) { ws.send(...) }，别信“我刚连上肯定 OK” - 给每个 WebSocket 实例打唯一标记，比如
ws._id = Date.now() + '-' + Math.random().toString(36).substr(2, 9) - 在
onmessage回调里，先比对event.currentTarget._id和当前活跃连接的_id，不匹配就丢弃——这是防旧连接残留消息的最简有效手段 - 别自动重发未确认消息：除非协议层有消息 ID + ACK 机制，否则盲目重发会破坏顺序，比如订单状态变更被重复提交
真正难的不是写几行 setTimeout，而是在网络不可靠、页面生命周期多变、用户行为不可控的前提下，让连接状态可感知、可收敛、不自扰。每一个 clearTimeout、每一次 _id 校验、每一处 readyState 判断，都是为了把“假连”变成“真通”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
