websocket断线重连需构建状态感知、延迟退避、心跳保活与自动恢复闭环：显式建模连接生命周期，独立运行心跳机制，重连前清理旧资源，提供缓存重发与钩子接口，确保连接健壮性。
在HTML5中用WebSocket实现断线重连，核心不是反复调用new WebSocket()，而是要建立状态感知、延迟退避、心跳保活和自动恢复的闭环逻辑。关键在于把连接生命周期（未连接、连接中、断开、重连中）显式建模，并让心跳与重连解耦又协同。
一、定义连接状态与基础重连控制器
先封装一个可管理状态的类，避免全局变量和重复连接：
- 用
readyState监听真实连接状态，但不依赖它做唯一判断（如网络闪断时可能仍为1但实际不可用） - 维护内部状态：
CONNECTING、OPEN、CLOSED、RECONNECTING - 设置最大重试次数（如5次）和指数退避初始延迟（如1000ms），每次失败后延迟翻倍
二、心跳机制独立运行，不阻塞重连流程
心跳应由独立定时器驱动，与WebSocket实例绑定，而非放在onopen里简单setInterval：
- 连接成功后启动心跳：每30秒发一次
ping消息（自定义类型，如{"type":"ping"}） - 监听
onmessage，收到{"type":"pong"}则重置心跳超时计时器 - 若连续2次未收到
pong（即60秒内无响应），主动close()并触发重连 —— 这比等待onclose更及时
三、重连过程需清除旧资源并防重复触发
每次重连前必须清理上一次残留，否则会积累多个定时器或事件监听器：
- 调用
clearTimeout(this.heartbeatTimeout)和clearInterval(this.pingInterval) - 移除旧WebSocket的
onopen/onerror/onclose等事件绑定（用具名函数或off方式） - 在
RECONNECTING状态下忽略新的重连请求（如用户手动刷新页面时多次点击“重连”按钮）
四、提供可扩展的消息收发接口与重连钩子
对外暴露简洁API，内部处理状态流转细节：
-
send(data)：只在OPEN状态下发，否则缓存到队列，重连成功后批量重发 -
onMessage(callback)：统一注册业务消息处理器，自动过滤ping/pong等控制帧 -
onReconnect(cb)：提供重连成功回调，用于刷新UI或恢复订阅 - 支持传入
reconnectOptions = { maxRetries: 5, baseDelay: 1000 }灵活配置
不复杂但容易忽略的是：心跳超时判定必须结合服务端响应，不能单靠客户端定时器；重连时WebSocket对象必须完全销毁重建，复用旧实例会导致事件错乱。真正健壮的封装，是让业务层只关心“发什么、收什么”，其余交由连接管理器兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
