前端高可用WebSocket模块需实现自动重连、网络异常感知与服务端失联探测；通过封装连接状态、双向心跳（ping/pong+超时检测）、页面可见性及网络状态协同控制，并保障断线期间消息队列重发与ACK机制。
在前端实现高可用、带心跳保活的 WebSocket 模块，核心是解决三个问题：连接自动重连、网络异常时的状态感知、服务端失联时的主动探测。不依赖后端配合也能维持稳定通信，关键在于客户端自主管理连接生命周期和健康状态。
封装 WebSocket 实例并管理连接状态
避免直接使用原生 WebSocket，而是封装成可控制的类，统一维护 CONNECTING、OPEN、CLOSING、CLOSED 状态，并暴露 connect()、reconnect()、close() 方法。每次新建实例前先清理旧连接和定时器，防止内存泄漏或重复连接。
- 用
isConnected和isReconnecting标志位区分真实连接态与重试中态 - 连接成功后立即启动心跳定时器，失败则进入退避重连（如 1s → 2s → 4s → 最大 30s）
- 监听
onerror不直接判定断连（它可能只是中间错误），以onclose为准触发重连逻辑
实现双向心跳保活机制
心跳不能只靠客户端发 ping，必须和服务端约定响应规则。推荐采用“客户端定时发 ping + 服务端必须回 pong”的模式，并设置超时检测：若指定时间内未收到 pong，则主动关闭当前连接并触发重连。
deep-java-review
下载
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
- 心跳间隔建议 25–30 秒（略小于多数代理/网关的 60 秒空闲超时）
- 设置
pongTimeout（如 10 秒），收到服务端 pong 后清除该 timeout；未清除则视为失联 - 客户端 ping 消息体建议为固定字符串（如
"ping"），服务端识别后返回"pong"，避免解析开销 - 注意：不要用
websocket.ping()（浏览器不支持），全部走send()发送自定义消息
增强网络环境适应性
真实用户场景中，Wi-Fi 切换、休眠唤醒、弱网抖动都会导致连接中断。需结合页面可见性、网络状态、手动断连信号做协同判断。
立即学习“Java免费学习笔记（深入）”；
- 监听页面
visibilitychange：隐藏时暂停心跳、暂存待发消息；显示后尝试恢复连接 - 监听
navigator.onLine变化，离线时不重连，上线后延迟 1–2 秒再尝试（避免瞬间重连风暴） - 提供
pause()/resume()接口，供业务层在路由切换、弹窗遮挡等场景主动干预 - 对连续多次重连失败（如 5 次），可降级为轮询或提示用户检查网络
消息队列与重连续传保障
连接断开期间产生的发送请求不能丢失。需维护一个内存消息队列，在重连成功且状态为 OPEN 后，按序重发（可加时间戳或序列号防重复）。
- 发送前检查
readyState === WebSocket.OPEN，否则入队；重连成功后遍历队列send() - 对关键消息（如登录态刷新、订单提交）可增加 ACK 机制：服务端处理完后返回确认，客户端监听超时并重发
- 队列长度设上限（如 100 条），超限时丢弃最老消息并告警，防止内存持续增长
