如何利用“单例模式”配合闭包确保全局仅存在一个 WebSocket 长连接实例

单例模式加闭包实现 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 实例，而是靠执行时机和导出方式：

• 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 事件协调