feat: ws测试数据

src/utils/webSocket.ts

@@ -8,8 +8,10 @@ enum WebSocketStatus {
 
 // WebSocket消息接口
 interface WebSocketMessage {
-  serveName?: WsID
+  serverName: WsID
   type: MessageType
+  data?: Record<string, string>
+  list?: Record<string, string>[]
 }
 
 // 定义消息类型
@@ -25,13 +27,21 @@ export const useWebSocketManager = () => {
       console.log('WebSocket 未连接，无法发送消息')
       return false
     }
-    data.serveName = 'wsClient'
     console.log('发送消息到服务端:', JSON.stringify(data))
     wsClient.value.send(JSON.stringify(data))
     return true
   }
+  const handlerReceiveMessage = (message: WebSocketMessage) => {
+    if (!message) return null
+    const data = unref(message)
+    if (data.serverName == 'wsServer') {
+      return message
+    }
+    return null
+  }
   return {
-    sendMessage
+    sendMessage,
+    handlerReceiveMessage
   }
 }
 
@@ -61,13 +71,13 @@ export const initWebSocket = (url: string) => {
       console.log('WebSocket 连接已断开')
       wsStatus.value = WebSocketStatus.CLOSED
     },
-    onError(ws, event) {
+    onError(_ws, event) {
       console.log('WebSocket 发生错误:', event)
       wsStatus.value = WebSocketStatus.ERROR
     },
-    onMessage(ws, event) {
+    onMessage(_ws, event) {
       console.log('收到 WebSocket 消息:', event.data)
-      lastMessage.value = event.data
+      lastMessage.value = JSON.parse(event.data)
       // 这里可以添加全局消息处理逻辑
     }
   })
@@ -79,6 +89,7 @@ export const initWebSocket = (url: string) => {
 
   // 在应用关闭时断开连接
   window.addEventListener('beforeunload', () => {
+    console.log('关闭')
     close()
   })
 

src/views/test/index.vue

@@ -32,9 +32,10 @@
           <el-button type="danger" icon="Delete" plain> 删除 </el-button>
           <p>当前状态: {{ wsStatus }}</p>
           <p>最后消息: {{ lastMessage }}</p>
+          <p>服务器: {{ caseList }}</p>
         </div>
       </div>
-      <el-table :data="tableData" border ref="tableRef" show-overflow-tooltip>
+      <el-table :data="caseList?.list" border ref="tableRef" show-overflow-tooltip>
         <el-table-column type="index" label="序号" width="60" />
         <el-table-column prop="id" label="用例编号" width="300" />
         <el-table-column prop="name" label="用例名称" width="180" />
@@ -73,13 +74,14 @@ import { CaseVO } from '@/api/interface/case'
 import AddDialog from './components/index.vue'
 import caseData from '../data'
 import { wsClient, wsStatus, lastMessage, useWebSocketManager } from '@/utils/webSocket'
-const { sendMessage } = useWebSocketManager()
+const { sendMessage, handlerReceiveMessage } = useWebSocketManager()
 // 组件加载完成后发送初始消息
 onMounted(() => {
   console.log('组件已加载，发送初始消息')
   nextTick(() => {
     if (wsClient.value && wsStatus.value === '已连接') {
       sendMessage({
+        serverName: 'wsClient',
         type: 'fetchList'
       })
     } else {
@@ -88,23 +90,22 @@ onMounted(() => {
   })
 })
 
-// 发送普通消息
-const sendData = () => {
-  if (wsClient.value) {
-    console.log('正在发送测试消息...')
-    sendMessage({
-      type: 'fetchList'
-    })
-  } else {
-    console.log('WebSocket 未连接，无法发送消息')
-  }
-}
+const caseList = computed(() => {
+  return handlerReceiveMessage(lastMessage.value)
+})
+
+// 监听状态变化
+watch(lastMessage, newMessage => {
+  const ddd = handlerReceiveMessage(newMessage)
+  console.log(`WebSocket 最新的newMessagenewMessagenewMessage:`, JSON.stringify(ddd))
+})
 
 // 保存数据时发送消息
 const saveData = () => {
   if (wsClient.value) {
     console.log('正在保存数据并发送消息...')
     sendMessage({
+      serverName: 'wsClient',
       type: 'save'
     })
   } else {