单例模式加闭包实现 WebSocket 全局唯一实例，核心是延迟初始化、闭包封装状态与防重复创建，通过模块顶层执行并导出统一实例，确保连接生命周期可控、状态可预期且避免资源浪费。
用单例模式加闭包实现 WebSocket 全局唯一实例，核心是“延迟初始化 + 闭包封装状态 + 防重复创建”。关键不在语法炫技，而在控制连接生命周期、避免多处 new WebSocket 导致资源浪费或状态混乱。
用闭包封存实例与状态
闭包能将 WebSocket 实例、重连逻辑、消息监听器等私有变量锁在函数作用域内，外部无法直接修改或覆盖。典型结构是返回一个对象，只暴露 connect、send、close 等受控方法：
const createWebSocket = () => {
let instance = null;
let reconnectTimer = null;
<p>const connect = (url) => {
if (instance && instance.readyState === WebSocket.OPEN) return;
if (instance && (instance.readyState === WebSocket.CONNECTING || instance.readyState === WebSocket.OPEN)) {
return; // 正在连接或已连上，不重复发起
}</p><pre class="brush:php;toolbar:false;">instance = new WebSocket(url);
instance.onopen = () => { /* 清除重连计时器 */ };
instance.onmessage = (e) => { /* 统一处理消息 */ };
instance.onerror = () => { /* 触发重连 */ };
instance.onclose = () => { /* 延迟重连 */ };};
return { connect, send: (data) => instance?.readyState === WebSocket.OPEN && instance.send(data), close: () => instance?.close(), getReadyState: () => instance?.readyState ?? 0 }; };
const ws = createWebSocket(); // 执行一次，返回带方法的对象
单例控制：确保全局只有一份 ws 对象
真正实现“单例”，靠的是模块级导出或全局命名空间绑定——不是靠类的 static 实例，而是靠执行时机和导出方式：
WebSocket 8.18.2 是该协议规范的一个重要迭代版本，主要优化了连接稳定性与数据传输效率。它通过全双工通信机制，允许客户端与服务器在单一长连接上实时交换数据，大幅降低传统 HTTP 轮询的开销。该版本增强了心跳保活、自动重连及二进制帧传输能力，适用于即时通讯、在线游戏及金融行情推送等低延迟场景，为开发者提供更可靠的实时网络交互基础。
- ESM 模块中，把 createWebSocket() 调用写在顶层，然后 export 默认对象，所有 import 的地方拿到的是同一引用
- 不推荐使用 window.ws = createWebSocket() 这类挂全局变量的方式，除非明确处于浏览器环境且无模块系统
- 如果项目用 TypeScript，可配合 namespace 或 declare global 扩展类型，但实例本身仍由闭包生成
支持手动重连与状态同步
单例的意义不只是“只有一个”，更是“状态可预期”。需主动管理 readyState、错误恢复、发送队列（连接未就绪时暂存消息）：
- onopen 后清空 pendingMsg 队列并逐条 send
- onclose 时设防抖重连（如 1s 后重试，失败则指数退避）
- 提供 isConnecting() / isConnected() 等语义化判断方法，比直接读 readyState 更安全
- send 方法内部检查状态，拒绝 CLOSED 或 UNSENT 状态下的调用，避免抛错
避免常见陷阱
看似简单，实操中高频出错点集中在生命周期与引用泄漏：
- 不要在组件 mount 时反复调用 connect() —— 应统一在应用启动时初始化，组件只 use ws.send()
- 关闭页面前记得调用 ws.close()，否则可能触发 onclose 后又自动重连（尤其服务端未优雅断开时）
- 监听器不要重复绑定：onmessage 等事件在每次 connect 时重新赋值，旧实例已被销毁，无需 removeEventListener
- 若需跨 iframe 或多 tab 同步连接状态，单例无效，得借助 BroadcastChannel 或 localStorage + storage 事件协调
