zyp/xiaomubiao-master

Fork 0

Files

zyp b3089a254e Initial commit

2026-05-22 16:13:20 +08:00

5.1 KiB

Raw Blame History

双WebSocket服务

这个模块提供了一个双WebSocket服务，可以同时连接两个不同的WebSocket服务器，包括你的外部服务 ws://27.11.11.177:3000。

功能特性

✅ 同时连接两个WebSocket服务
✅ 自动重连机制
✅ 消息处理器和事件分发
✅ 连接状态监控
✅ 与现有WebSocket系统集成
✅ 无需token认证的外部WebSocket连接

文件结构

src/api/websocket/
├── dualWebSocket.ts              # 双WebSocket服务核心类
├── dualWebSocketManager.ts       # 双WebSocket管理器
├── util/
│   ├── config.ts                 # 原有WebSocket配置
│   └── externalConfig.ts         # 外部WebSocket配置
├── example.ts                    # 使用示例
└── README.md                     # 说明文档

src/components/websocket/
└── DualWebSocketDemo.vue         # 演示组件

快速开始

1. 基本使用

import DualWebSocketManager from '@/api/websocket/dualWebSocketManager'

// 在Vue组件中使用
export default {
  data() {
    return {
      dualWebSocketManager: null
    }
  },
  mounted() {
    // 初始化双WebSocket管理器
    this.dualWebSocketManager = new DualWebSocketManager(this.$store)
    
    // 启动服务
    this.dualWebSocketManager.init()
  },
  beforeUnmount() {
    // 关闭连接
    this.dualWebSocketManager?.close()
  }
}

2. 使用示例类

import { useDualWebSocketInVueComponent } from '@/api/websocket/example'

export default {
  setup() {
    const { example, startService, stopService } = useDualWebSocketInVueComponent(this.$store)
    
    onMounted(() => {
      startService()
    })
    
    onUnmounted(() => {
      stopService()
    })
    
    return {
      example
    }
  }
}

3. 发送消息

// 发送消息到主WebSocket
this.dualWebSocketManager.sendPrimaryMessage({
  type: 'command',
  data: { action: 'start' }
})

// 发送消息到外部WebSocket (ws://27.11.11.177:3000)
this.dualWebSocketManager.sendExternalMessage({
  type: 'request',
  data: { query: 'status' }
})

4. 监听消息

import EventBus from '@/event-bus'

// 监听主WebSocket消息
EventBus.on('PrimaryWebSocket-Message', (data) => {
  console.log('主WebSocket消息:', data)
})

// 监听外部WebSocket消息
EventBus.on('ExternalWebSocket-Message', (data) => {
  console.log('外部WebSocket消息:', data)
})

// 监听外部数据更新
EventBus.on('ExternalDataUpdate', (data) => {
  console.log('外部数据更新:', data)
})

配置说明

外部WebSocket配置

默认配置连接到 ws://27.11.11.177:3000，无需token认证：

// 默认配置
{
  url: 'ws://27.11.11.177:3000',
  name: 'ExternalService',
  autoReconnect: true,
  maxReconnectionDelay: 20000,
  minReconnectionDelay: 5000,
  maxRetries: 5
}

自定义配置

import { createExternalWebSocketConfig } from '@/api/websocket/util/externalConfig'

const customConfig = createExternalWebSocketConfig(
  'ws://your-server.com:8080',
  'CustomService',
  {
    maxReconnectionDelay: 30000,
    minReconnectionDelay: 10000,
    maxRetries: 3
  }
)

事件说明

连接事件

PrimaryWebSocket-Open: 主WebSocket连接成功
PrimaryWebSocket-Close: 主WebSocket连接断开
PrimaryWebSocket-Error: 主WebSocket连接错误
ExternalWebSocket-Open: 外部WebSocket连接成功
ExternalWebSocket-Close: 外部WebSocket连接断开
ExternalWebSocket-Error: 外部WebSocket连接错误

消息事件

PrimaryWebSocket-Message: 主WebSocket消息
ExternalWebSocket-Message: 外部WebSocket消息
ExternalDataUpdate: 外部数据更新
ExternalStatusChange: 外部状态变化
ExternalWebSocket-Data: 通用外部数据

演示组件

使用 DualWebSocketDemo.vue 组件来测试和演示双WebSocket功能：

<template>
  <DualWebSocketDemo />
</template>

<script>
import DualWebSocketDemo from '@/components/websocket/DualWebSocketDemo.vue'

export default {
  components: {
    DualWebSocketDemo
  }
}
</script>

注意事项

无需token认证: 外部WebSocket连接 ws://27.11.11.177:3000 不需要token认证
自动重连: 两个WebSocket连接都支持自动重连机制
事件总线: 使用EventBus进行事件分发，确保消息能够正确传递
内存管理: 消息列表会自动限制数量，避免内存溢出
错误处理: 包含完整的错误处理和日志记录

故障排除

连接失败

检查网络连接
确认WebSocket服务器地址正确
查看浏览器控制台错误信息

消息丢失

检查事件监听器是否正确注册
确认消息格式是否正确
查看EventBus事件是否正常触发

重连问题

检查重连配置参数
确认服务器是否支持重连
查看网络稳定性

扩展功能

如果需要添加更多功能，可以：

在 DualWebSocketService 中添加新的方法
在 DualWebSocketManager 中添加新的消息处理逻辑
在 externalConfig.ts 中添加新的配置选项
在演示组件中添加新的UI功能

5.1 KiB Raw Blame History Unescape Escape