# 双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. 基本使用

```typescript
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. 使用示例类

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

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

### 3. 发送消息

```typescript
// 发送消息到主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. 监听消息

```typescript
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认证：

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

### 自定义配置

```typescript
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功能：

```vue
<template>
  <DualWebSocketDemo />
</template>

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

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

## 注意事项

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

## 故障排除

### 连接失败

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

### 消息丢失

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

### 重连问题

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

## 扩展功能

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

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