如何利用“单例模式”配合闭包确保在单页应用中全局仅存在一个 WebSocket 长连接实例-js教程-PHP中文网

不能直接多次 new websocket()，因会导致多连接并存、资源浪费、消息重复、重连混乱，且跨端不兼容；闭包单例通过 iife 锁定 instance 实现唯一初始化，但需配合 uni.connectsocket、状态清理、指数退避重连等手动补全逻辑。

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

为什么不能直接 new WebSocket() 多次调用

在单页应用里，每个页面或组件都 new WebSocket(url)，会导致多个物理连接并存。服务端看到的是多个独立 client ID，资源占用翻倍，消息广播可能重复推送给同一用户，重连逻辑也各自为政。更糟的是，uni-app、Taro 等跨端框架中，new WebSocket() 在小程序和 App 端根本不可用——它只在 H5 有效，跨端一致性直接崩塌。

闭包单例如何避免多次初始化

核心是把 instance 变量锁在 IIFE 内部，外部无法篡改，且仅首次调用 getInstance() 时才真正创建连接：

const WebSocketSingleton = (function () {
  let instance = null
  return {
    getInstance: function (url) {
      if (!instance) {
        // 这里必须用平台兼容的 API，比如 uni-app 用 uni.connectSocket
        instance = {
          url,
          socket: null,
          connect() {
            uni.connectSocket({ url })
            uni.onSocketOpen(() => { /* 存引用 */ })
            uni.onSocketMessage((e) => { /* 转发给监听者 */ })
          },
          send(data) { uni.sendSocketMessage({ data }) }
        }
      }
      return instance
    }
  }
})()

第二次调用 WebSocketSingleton.getInstance('wss://...') 不会新建连接，而是返回上次的 instance
即使传入不同 url，也不会覆盖——这反而是个坑：你得确保所有地方传的 url 一致，否则闭包里会误判为“新实例”而新建连接
如果需要支持多 endpoint（如不同环境），建议把 url 提到配置层，不在 getInstance 参数里传

uni-app 下必须用 uni.connectSocket，不是可选项

uni-app 的 uni.connectSocket 是跨端统一入口，但行为差异大：

WebSocket 8.18.2

WebSocket 8.18.2 是该协议规范的一个重要迭代版本，主要优化了连接稳定性与数据传输效率。它通过全双工通信机制，允许客户端与服务器在单一长连接上实时交换数据，大幅降低传统 HTTP 轮询的开销。该版本增强了心跳保活、自动重连及二进制帧传输能力，适用于即时通讯、在线游戏及金融行情推送等低延迟场景，为开发者提供更可靠的实时网络交互基础。

下载