webSocket Manager

WebSocket 连接管理器,用于统一管理多个 WebSocket 连接。这个管理器特别适用于需要同时维护多个 WebSocket 连接的复杂应用。
该连接管理器请配合,封装好的 uniapp websocket封装 使用。

js 复制代码
import WS from '@/utils/websocket.js'

class WebSocketManager {
  constructor() {
    this.connections = new Map()
  }

  /**
   * 建立或复用 WebSocket 连接
   * @param {string} url WebSocket 地址
   * @param {Function} onMessage 收到消息回调
   */
  connect(url, onMessage) {
    if (this.connections.has(url)) {
      console.log(`复用已有连接: ${url}`)
      return this.connections.get(url)
    }

    console.log(`新建连接: ${url}`)
    const ws = new WS({
      url,
      onConnected: () => {},
      onMessage: (data) => {
        if (onMessage) {
          onMessage(data)
        }
      },
    })

    this.connections.set(url, ws)

    // 自动清理无效连接
    const cleanup = () => {
      if (ws && ws.socketTask) {
        ws.socketTask.onClose(() => {
          console.log(`连接关闭,移除缓存: ${url}`)
          this.connections.delete(url)
        })
      }
    }

    setTimeout(cleanup, 0)

    return ws
  }

  /**
   * 发送消息
   * @param {string} url 目标地址
   * @param {any} message 消息内容
   */
  sendMessage(url, message) {
    const ws = this.connections.get(url)
    if (ws && ws.socketTask) {
      ws.socketTask.send({
        data: JSON.stringify(message),
        fail: (err) => {
          console.error('发送消息失败:', err)
        },
      })
    } else {
      console.warn(`未找到可用连接: ${url}`)
    }
  }

  /**
   * 主动关闭某个连接
   * @param {string} url 地址
   */
  close(url) {
    const ws = this.connections.get(url)
    if (ws) {
      ws.close()
      this.connections.delete(url)
    }
  }

  /**
   * 关闭所有连接(如页面卸载时)
   */
  closeAll() {
    for (const [url, ws] of this.connections.entries()) {
      ws.close()
    }
    this.connections.clear();
    console.log('所有websocket已关闭!')
  }
}

// 导出单例
const wsManager = new WebSocketManager()
export default wsManager

使用

从utils 里面引用连接管理器: import wsManager from '@/utils/webSocketManager.js'

js 复制代码
      let wsUrl = `${wsUrl}/websocket/handheld/ws/notify/${deviceCode}`; // ws地址
      
      // 连接 ws
      wsManager.connect(wsUrl, (data) => {
        console.log('*******ws消息:',data);
      })
js 复制代码
  onUnload() {
    // 关闭所有ws链接
    wsManager.closeAll()
  }
相关推荐
泷羽Sec-静安20 分钟前
Less-1 GET-Error based-Single quotes-String GET-基于错误-单引号-字符串
前端·css·网络·sql·安全·web安全·less
小时前端31 分钟前
虚拟DOM已死?90%内存节省的Vapor模式正在颠覆前端
前端·html
Keepreal49632 分钟前
Web Components简介及如何使用
前端·javascript·html
进击的野人36 分钟前
JavaScript变量声明的前世今生:从var到let/const的演进
javascript
jump68039 分钟前
TS中 unknown 和 any 的区别
前端
无羡仙1 小时前
AI终于‘看见’网页了!Stagewise让UI修改从‘盲调’变‘指哪打哪
前端
柯腾啊2 小时前
“Script error.”的产生原因和解决办法
前端·javascript·浏览器
沙漠之皇2 小时前
ts 定义重复对象字段
前端
HashTang2 小时前
不用再配服务器了!这套 Next.js + Cloudflare 模板,一个人搞定全栈出海
前端·后端·边缘计算
Cory.眼3 小时前
WebRTC入门指南:实时通信零基础
javascript·webrtc·实时通信