前端WebSocket自动重连必须封装状态机+指数退避+心跳保活+资源清理闭环，否则将导致重复连接、定时器堆积、“WebSocket is already CLOSED”报错及消息丢失。
直接说结论：前端 WebSocket 自动重连不能靠反复 new WebSocket() 硬试，必须封装状态机 + 指数退避 + 心跳保活 + 资源清理闭环，否则必然出现重复连接、定时器堆积、“WebSocket is already CLOSED”报错、消息丢失。
onclose 里直接调 connect() 会出什么问题
这是最常见也最危险的写法。表面上“断了就重连”，实际会快速触发多个并发连接、内存泄漏和事件监听器错乱。
- onclose 可能被多次触发（比如网络闪断时 readyState 还是 OPEN，但 send 已失败）
- 每次 new WebSocket() 都新建实例，旧实例的 onmessage/onerror 不会自动解绑，导致回调重复执行
- 心跳定时器（setInterval）不清理，多个 ping 同时发，服务端压力陡增
- readyState === 2（CLOSING）时调 send() 会直接抛
WebSocket is already CLOSED异常
必须用独立变量管理连接生命周期状态
readyState 是浏览器层面的状态，它滞后且不可靠（例如 NAT 超时后仍显示 OPEN）。你需要自己维护更细粒度的状态：
- 定义内部状态：
CONNECTING/OPEN/CLOSING/CLOSED/RECONNECTING - 用布尔标志
isReconnecting拦截重复触发，onclose 中先判断再决定是否启动重连 - 用
wsRef缓存当前实例，重连前先执行wsRef?.close()并设为 null，避免残留 - 重连计数
reconnectCount放在闭包或类实例中，不依赖全局变量
心跳机制必须与重连解耦，且带超时判定
只靠 onclose 不够——TCP 层可能“假连接”，客户端收不到任何事件，但 send 已失效。心跳不是装饰，是主动探测手段。
HISUI 前端框架开发指南（IRIS版）
下载
HISUI 前端框架基础开发指南。HISUI 是基于 easyui 二次开发的 jQuery UI 组件库，专为医疗信息系统设计。当涉及 HISUI 组件开发、jQuery easyui 表格/表单/布局/窗口、医疗系统前端页面编写时使用此 skill。 涵盖 40 个组件的官方文档参考，支持声明式与编程式两种初始化方式，提供 $cm/$m 数据访问方法。
立即学习“前端免费学习笔记（深入）”；
- 连接成功后启动独立定时器：
pingInterval = setInterval(() => { if (ws.readyState === WebSocket.OPEN) ws.send(JSON.stringify({type: 'ping'})); }, 30000) - 收到
{"type":"pong"}时重置超时计时器：clearTimeout(heartbeatTimeout) - 若连续 2 次未收到 pong（即 60 秒内无响应），主动调用
ws.close(4999, "no_pong")，强制触发 onclose 流程 - 心跳逻辑不能写在 onopen 回调里——它必须绑定到当前 ws 实例，且每次重连后重建
重连失败码要区分处理，不能一概而论
onclose 的 event.code 是关键信号，盲目重连可能适得其反。
-
event.code === 1000：正常关闭，无需重连（如用户登出、页面卸载） -
event.code === 1006：异常关闭（无 close 帧），大概率网络中断，应立即按指数退避重试 -
event.code >= 4000：自定义错误码，需结合event.reason判断，例如"token_expired"就该先刷新凭证再重连 - 重连延迟建议：从
1000 * Math.pow(1.5, reconnectCount)开始，上限 30000ms，总次数不超过 10 次
真正容易被忽略的是：重连时必须同步更新认证参数（如 token），否则会陷入“重连→401→重连”的死循环；服务端也要支持连接 ID 复用或离线消息补推，否则前端重连成功，业务数据已经断层了。
