feat: 集成websocket

src/utils/webSocket.ts

@@ -0,0 +1,87 @@
+// WebSocket 状态枚举
+enum WebSocketStatus {
+  CONNECTING = '连接中',
+  OPEN = '已连接',
+  CLOSED = '已断开',
+  ERROR = '错误'
+}
+
+// WebSocket消息接口
+interface WebSocketMessage {
+  serveName?: WsID
+  type: MessageType
+}
+
+// 定义消息类型
+export type MessageType = 'update' | 'save' | 'fetch' | 'fetchList' | 'other'
+
+// 定义消息类型
+export type WsID = 'wsClient' | 'wsServer'
+
+export const useWebSocketManager = () => {
+  // 发送消息方法
+  const sendMessage = (data: WebSocketMessage) => {
+    if (wsStatus.value !== WebSocketStatus.OPEN || !wsClient.value) {
+      console.log('WebSocket 未连接，无法发送消息')
+      return false
+    }
+    data.serveName = 'wsClient'
+    console.log('发送消息到服务端:', JSON.stringify(data))
+    wsClient.value.send(JSON.stringify(data))
+    return true
+  }
+  return {
+    sendMessage
+  }
+}
+
+// 导出 WebSocket 客户端实例和状态
+export const wsClient = ref<any>(null)
+export const wsStatus = ref<WebSocketStatus>(WebSocketStatus.CLOSED)
+export const lastMessage = ref<any>(null)
+
+// 初始化 WebSocket 连接
+export const initWebSocket = (url: string) => {
+  console.log('正在初始化 WebSocket 连接...')
+
+  const { status, data, send, open, close } = useWebSocket(url, {
+    autoReconnect: {
+      retries: 10,
+      delay: 3000,
+      onFailed() {
+        console.log('WebSocket 连接失败，已达到最大重试次数')
+      }
+    },
+    onConnected(ws) {
+      console.log('WebSocket 连接已建立')
+      wsClient.value = ws
+      wsStatus.value = WebSocketStatus.OPEN
+    },
+    onDisconnected() {
+      console.log('WebSocket 连接已断开')
+      wsStatus.value = WebSocketStatus.CLOSED
+    },
+    onError(ws, event) {
+      console.log('WebSocket 发生错误:', event)
+      wsStatus.value = WebSocketStatus.ERROR
+    },
+    onMessage(ws, event) {
+      console.log('收到 WebSocket 消息:', event.data)
+      lastMessage.value = event.data
+      // 这里可以添加全局消息处理逻辑
+    }
+  })
+
+  // 监听状态变化
+  watch(status, newStatus => {
+    console.log(`WebSocket 状态变化: ${newStatus}`)
+  })
+
+  // 在应用关闭时断开连接
+  window.addEventListener('beforeunload', () => {
+    console.log('应用关闭，断开 WebSocket 连接')
+    close()
+  })
+
+  return { status, data, send, open, close }
+}