vue2-client 1.16.32 → 1.16.33

package/src/utils/websocket/README.md

@@ -0,0 +1,224 @@
+# WebSocket 工具类
+
+一个通用的 WebSocket 连接管理工具，提供连接、重连、消息发送等功能。
+
+## 功能特性
+
+- 🔌 **自动连接管理**: 自动处理连接、断开、重连
+- 🔄 **智能重连**: 支持自动重连，可配置重连次数和间隔
+- 📡 **事件系统**: 完整的事件监听机制
+- 🎯 **Vue 2 兼容**: 提供组合式 API 风格的 Hook
+
+## 基本用法
+
+### 1. 直接使用 WebSocketManager 类
+
+```javascript
+import { WebSocketManager } from '@vue2-client/utils/websocket/websocket'
+
+// 创建实例
+const wsManager = new WebSocketManager({
+  autoReconnect: true,
+  reconnectInterval: 3000,
+  maxReconnectAttempts: 5
+})
+
+// 连接 WebSocket
+wsManager.connect('ws://localhost:8080/websocket')
+
+// 监听事件
+wsManager.on('connected', (data) => {
+  console.log('连接成功', data)
+})
+
+wsManager.on('message', (data) => {
+  console.log('收到消息', data.data)
+})
+
+// 发送消息
+wsManager.send({ type: 'ping', data: 'hello' })
+
+// 断开连接
+wsManager.disconnect()
+```
+
+### 2. 在 Vue 组件中使用 useWebSocket Hook
+
+```vue
+<template>
+  <div>
+    <div>连接状态: {{ connectionState.isConnected ? '已连接' : '未连接' }}</div>
+    <div>重连次数: {{ connectionState.reconnectAttempts }}</div>
+    <button @click="sendMessage">发送消息</button>
+    <button @click="reconnect">重连</button>
+  </div>
+</template>
+
+<script>
+import { useWebSocket } from '@vue2-client/utils/websocket/websocket'
+
+export default {
+  setup() {
+    const {
+      connect,
+      disconnect,
+      reconnect,
+      send,
+      on,
+      off,
+      getConnectionState
+    } = useWebSocket({
+      autoReconnect: true,
+      reconnectInterval: 3000,
+      maxReconnectAttempts: 5
+    })
+
+    // 连接状态
+    const connectionState = getConnectionState()
+
+    // 连接 WebSocket
+    connect('ws://localhost:8080/websocket')
+
+    // 监听消息
+    on('message', (data) => {
+      console.log('收到消息:', data.data)
+    })
+
+    // 发送消息
+    const sendMessage = () => {
+      send({ type: 'ping', data: 'hello' })
+    }
+
+    // 重连
+    const reconnectWebSocket = () => {
+      reconnect('ws://localhost:8080/websocket')
+    }
+
+    return {
+      connectionState,
+      sendMessage,
+      reconnect: reconnectWebSocket
+    }
+  }
+}
+</script>
+```
+
+## API 参考
+
+### WebSocketManager 类
+
+#### 构造函数选项
+
+| 参数 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| autoReconnect | Boolean | true | 是否自动重连 |
+| reconnectInterval | Number | 3000 | 重连间隔（毫秒） |
+| maxReconnectAttempts | Number | 5 | 最大重连次数 |
+
+#### 方法
+
+##### connect(url, options)
+连接 WebSocket
+- `url`: WebSocket 连接地址
+- `options`: 连接选项（可选）
+
+##### disconnect()
+断开 WebSocket 连接
+
+##### send(message)
+发送消息
+- `message`: 要发送的消息（字符串或对象）
+
+##### reconnect(url, options)
+手动重连
+- `url`: WebSocket 连接地址
+- `options`: 连接选项（可选）
+
+##### on(event, callback)
+添加事件监听器
+- `event`: 事件名称
+- `callback`: 回调函数
+
+##### off(event, callback)
+移除事件监听器
+- `event`: 事件名称
+- `callback`: 回调函数
+
+##### getConnectionState()
+获取连接状态
+- 返回: `{ isConnected, reconnectAttempts, readyState }`
+
+### 事件列表
+
+| 事件名称 | 说明 | 数据 |
+|----------|------|------|
+| connecting | 正在连接 | `{ url }` |
+| connected | 连接成功 | `{ event }` |
+| message | 收到消息 | `{ data, event }` |
+| closed | 连接关闭 | `{ event }` |
+| error | 连接错误 | `{ event }` |
+| reconnecting | 重连中 | `{ attempts }` |
+| reconnect-failed | 重连失败 | `{ attempts }` |
+| disconnected | 已断开连接 | `{}` |
+
+## 使用示例
+
+### 实时聊天应用
+
+```javascript
+import { useWebSocket } from '@vue2-client/utils/websocket/websocket'
+
+export default {
+  setup() {
+    const { connect, send, on, off } = useWebSocket({
+      autoReconnect: true,
+      reconnectInterval: 2000,
+      maxReconnectAttempts: 10
+    })
+
+    const messages = ref([])
+    const isConnected = ref(false)
+
+    // 连接聊天服务器
+    connect('ws://localhost:8080/chat')
+
+    // 监听连接状态
+    on('connected', () => {
+      isConnected.value = true
+    })
+
+    on('disconnected', () => {
+      isConnected.value = false
+    })
+
+    // 监听消息
+    on('message', (data) => {
+      messages.value.push(data.data)
+    })
+
+    // 发送消息
+    const sendChatMessage = (message) => {
+      send({
+        type: 'chat',
+        message: message,
+        timestamp: Date.now()
+      })
+    }
+
+    return {
+      messages,
+      isConnected,
+      sendChatMessage
+    }
+  }
+}
+```
+
+## 注意事项
+
+1. **内存泄漏**: 组件销毁时记得调用 `disconnect()` 方法
+2. **错误处理**: 建议监听 `error` 和 `reconnect-failed` 事件
+3. **消息格式**: 支持字符串和 JSON 对象格式的消息
+4. **重连策略**: 可以根据业务需求调整重连参数
+5. **浏览器兼容性**: 需要现代浏览器支持 WebSocket API

package/src/utils/websocket/websocket.js

@@ -0,0 +1,241 @@
+/**
+ * WebSocket 工具类
+ * 提供通用的 WebSocket 连接管理功能
+ */
+export class WebSocketManager {
+  constructor (options = {}) {
+    this.options = {
+      autoReconnect: true,
+      reconnectInterval: 3000,
+      maxReconnectAttempts: 5,
+      ...options
+    }
+
+    this.websocket = null
+    this.reconnectAttempts = 0
+    this.isConnected = false
+    this.reconnectTimer = null
+    this.listeners = new Map()
+    // 标记是否为手动断开，手动断开时不触发自动重连
+    this.manualClose = false
+  }
+
+  /**
+   * 连接 WebSocket
+   * @param {string} url WebSocket 连接地址
+   * @param {Object} options 连接选项
+   */
+  connect (url, options = {}) {
+    const connectOptions = { ...this.options, ...options }
+
+    try {
+      // 重置手动断开标记
+      this.manualClose = false
+      this.websocket = new WebSocket(url)
+
+      this.websocket.onopen = (event) => this.handleOpen(event, connectOptions)
+      this.websocket.onmessage = (event) => this.handleMessage(event, connectOptions)
+      this.websocket.onclose = (event) => this.handleClose(event, connectOptions)
+      this.websocket.onerror = (event) => this.handleError(event, connectOptions)
+
+      this.emit('connecting', { url })
+    } catch (error) {
+      console.error('>>>> WebSocket连接失败:', error, url)
+      this.emit('error', { error })
+      if (connectOptions.autoReconnect) {
+        this.handleReconnect(url, connectOptions)
+      }
+    }
+  }
+
+  /**
+   * 处理连接成功
+   */
+  handleOpen (event, options) {
+    this.isConnected = true
+    this.reconnectAttempts = 0
+    this.emit('connected', { event })
+  }
+
+  /**
+   * 处理消息接收
+   */
+  handleMessage (event, options) {
+    try {
+      const data = JSON.parse(event.data)
+      this.emit('message', { data, event })
+    } catch (error) {
+      // 如果不是JSON格式，直接处理原始数据
+      this.emit('message', { data: { message: event.data }, event })
+    }
+  }
+
+  /**
+   * 处理连接关闭
+   */
+  handleClose (event, options) {
+    this.isConnected = false
+    this.emit('closed', { event })
+
+    // 手动断开时不进行重连
+    if (!this.manualClose && options.autoReconnect && this.reconnectAttempts < options.maxReconnectAttempts) {
+      this.handleReconnect(options.url, options)
+    }
+  }
+
+  /**
+   * 处理连接错误
+   */
+  handleError (event, options) {
+    console.error('WebSocket连接错误:', event)
+    this.isConnected = false
+    this.emit('error', { event })
+  }
+
+  /**
+   * 处理重连
+   */
+  handleReconnect (url, options) {
+    if (this.reconnectAttempts >= options.maxReconnectAttempts) {
+      console.log('达到最大重连次数，停止重连')
+      this.emit('reconnect-failed', { attempts: this.reconnectAttempts })
+      return
+    }
+
+    this.reconnectAttempts++
+
+    this.reconnectTimer = setTimeout(() => {
+      console.log(`尝试重连 WebSocket (${this.reconnectAttempts}/${options.maxReconnectAttempts})`)
+      this.connect(url, options)
+    }, options.reconnectInterval)
+
+    this.emit('reconnecting', { attempts: this.reconnectAttempts })
+  }
+
+  /**
+   * 断开连接
+   */
+  disconnect () {
+    // 设置手动关闭标记，阻止自动重连
+    this.manualClose = true
+    if (this.reconnectTimer) {
+      clearTimeout(this.reconnectTimer)
+      this.reconnectTimer = null
+    }
+
+    if (this.websocket) {
+      this.websocket.close()
+      this.websocket = null
+    }
+
+    this.isConnected = false
+    this.emit('disconnected')
+  }
+
+  /**
+   * 发送消息
+   * @param {string|Object} message 要发送的消息
+   */
+  send (message) {
+    if (this.websocket && this.isConnected) {
+      const data = typeof message === 'string' ? message : JSON.stringify(message)
+      this.websocket.send(data)
+      return true
+    }
+    return false
+  }
+
+  /**
+   * 手动重连
+   */
+  reconnect (url, options = {}) {
+    this.disconnect()
+    this.reconnectAttempts = 0
+    this.connect(url, options)
+  }
+
+  /**
+   * 添加事件监听器
+   * @param {string} event 事件名称
+   * @param {Function} callback 回调函数
+   */
+  on (event, callback) {
+    if (!this.listeners.has(event)) {
+      this.listeners.set(event, [])
+    }
+    this.listeners.get(event).push(callback)
+  }
+
+  /**
+   * 移除事件监听器
+   * @param {string} event 事件名称
+   * @param {Function} callback 回调函数
+   */
+  off (event, callback) {
+    if (this.listeners.has(event)) {
+      const callbacks = this.listeners.get(event)
+      const index = callbacks.indexOf(callback)
+      if (index > -1) {
+        callbacks.splice(index, 1)
+      }
+    }
+  }
+
+  /**
+   * 触发事件
+   * @param {string} event 事件名称
+   * @param {Object} data 事件数据
+   */
+  emit (event, data) {
+    if (this.listeners.has(event)) {
+      this.listeners.get(event).forEach(callback => {
+        try {
+          callback(data)
+        } catch (error) {
+          console.error(`WebSocket事件监听器错误 (${event}):`, error)
+        }
+      })
+    }
+  }
+
+  /**
+   * 获取连接状态
+   */
+  getConnectionState () {
+    return {
+      isConnected: this.isConnected,
+      reconnectAttempts: this.reconnectAttempts,
+      readyState: this.websocket ? this.websocket.readyState : WebSocket.CLOSED
+    }
+  }
+}
+
+/**
+ * Vue 2 组合式 API 风格的 WebSocket Hook
+ * @param {Object} options 配置选项
+ */
+export function useWebSocket (options = {}) {
+  const wsManager = new WebSocketManager(options)
+
+  return {
+    // 连接方法
+    connect: (url, connectOptions) => wsManager.connect(url, connectOptions),
+    disconnect: () => wsManager.disconnect(),
+    reconnect: (url, connectOptions) => wsManager.reconnect(url, connectOptions),
+
+    // 消息方法
+    send: (message) => wsManager.send(message),
+
+    // 事件监听
+    on: (event, callback) => wsManager.on(event, callback),
+    off: (event, callback) => wsManager.off(event, callback),
+
+    // 状态
+    getConnectionState: () => wsManager.getConnectionState(),
+
+    // 原始管理器实例（用于高级用法）
+    manager: wsManager
+  }
+}
+
+export default WebSocketManager

package/vue.config.js

@@ -42,6 +42,12 @@ module.exports = {
         ws: false,
         changeOrigin: true
       },
+      '/socket/af-system': {
+        target: 'http://127.0.0.1:9002',
+        ws: true,
+        changeOrigin: true,
+        pathRewrite: { '^/socket/af-system': '/concept-websocket' },
+      },
       '/revenue-web/api/af-revenue': {
         pathRewrite: { '^/revenue-web/': '/' },
         target: v3Server,