WebSocket 生命周期管理需主动控制连接状态、响应事件并及时释放资源；创建时延迟实例化、绑定事件、检查 readyState；运行中实现心跳保活与指数退避重连；销毁时显式 close 并解绑事件；多实例应按需隔离、明确归属。
WebSocket 实例的生命周期管理，核心在于主动控制连接状态、合理响应事件、及时释放资源。它不依赖垃圾回收自动断开，一旦创建后若未显式关闭或意外中断，可能持续占用连接、内存甚至服务端资源。
连接建立与初始化阶段：延迟创建 + 错误兜底
避免页面加载即创建 WebSocket，尤其在网络不稳定或用户尚未进入交互场景时。建议在明确需要实时通信（如进入聊天页、开启监控面板）时再实例化。创建时必须设置 onerror 和 onclose 回调，并在 onerror 中做降级处理（如记录日志、提示重试）或触发重建逻辑。不要忽略 onerror——它不会自动触发 onclose，且部分网络异常（如 DNS 失败、CORS 拒绝）仅走 onerror。
- 使用
new WebSocket(url)后立即绑定事件，避免竞态（如先赋值再监听） - 检查
ws.readyState：0（CONNECTING）时不可发消息；1（OPEN）才安全；2/3 需重建 - 对关键业务，可配合定时器检测连接是否卡在 CONNECTING 状态超时（如 5s），主动 abort 并报错
运行中状态维护：心跳保活 + 自动重连控制
浏览器不会自动维持 WebSocket 连接，NAT、代理、负载均衡器常在空闲 30–60s 后静默断连。需应用层心跳：客户端定时（如每 25s）发送轻量 ping 帧（如 ws.send('ping')），服务端响应 pong。同时监听 onmessage 中的 pong 回复，标记连接活跃；若连续多次未收到 pong，则视为断连，触发重连。
- 重连应指数退避（1s → 2s → 4s → 8s），并设上限（如最多 5 次），避免雪崩
- 重连前检查
navigator.onLine，离线时不盲目重试 - 重连过程中，新发消息可暂存队列，待
onopen触发后再批量 flush
销毁与清理阶段：显式关闭 + 事件解绑
页面卸载、组件销毁（如 React unmount、Vue beforeUnmount）时，必须调用 ws.close()。仅将 ws 变量置为 null 不会关闭底层连接。关闭后还需手动移除所有事件监听器（ws.onopen = null 等），防止内存泄漏——尤其当回调引用了外部大对象或闭包时。
- 在
beforeunload或visibilitychange（页面切到后台）时主动 close，减少无效连接 - 使用 AbortController 无法终止 WebSocket，但可用于协调取消重连定时器或消息队列
- 开发期可用 Chrome DevTools 的 “Network → WS” 标签观察连接状态和帧收发，验证 close 是否生效
多实例与上下文隔离：按需隔离 + 显式归属
避免全局单例 WebSocket 处理多个业务模块，不同功能（如通知、协作编辑、数据同步）应使用独立实例，便于独立控制生命周期。每个实例需明确归属（如绑定到某个 React 组件实例或 Vuex module），销毁时能精准定位并关闭。
- 用 WeakMap 存储组件与 ws 实例的映射，避免强引用阻碍 GC
- 服务端也应支持按 client ID 或 token 区分连接，前端关闭时可主动通知服务端清理关联状态
- 同域名下多个 ws 连接不受同源策略限制，但受浏览器并发连接数限制（通常 6–10 个），需评估是否复用
不复杂但容易忽略：生命周期管理不是“建完就用、用完不管”，而是从创建那一刻起，就要规划它何时关、为何关、关不掉怎么办。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
