final version

frontend/src/views/AlgorithmsView.vue

@@ -268,7 +268,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted } from 'vue'
+import { ref, computed, onMounted, onUnmounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { ElMessage } from 'element-plus'
 import axios from 'axios'
@@ -302,6 +302,65 @@ const executionMessage = ref('')
 const executionResult = ref<any>(null)
 const activeUploadTab = ref('video')
 
+// WebSocket 连接
+let wsConnection: WebSocket | null = null
+const realtimeDetections = ref<any[]>([])
+const isRealtimeMode = ref(false)
+
+// 连接到 WebSocket 服务器
+const connectWebSocket = () => {
+  const wsUrl = `ws://localhost:8766`
+  
+  try {
+    wsConnection = new WebSocket(wsUrl)
+    
+    wsConnection.onopen = () => {
+      console.log('[WS] Connected to WebSocket server')
+      isRealtimeMode.value = true
+    }
+    
+    wsConnection.onmessage = (event) => {
+      try {
+        const data = JSON.parse(event.data)
+        console.log('[WS] Received:', data)
+        
+        if (data.msg_type === 'frame') {
+          realtimeDetections.value.push(data)
+          // 保持最近100帧
+          if (realtimeDetections.value.length > 100) {
+            realtimeDetections.value.shift()
+          }
+        } else if (data.msg_type === 'alert') {
+          ElMessage.warning(`检测到异常: ${data.event_type}`)
+        }
+      } catch (e) {
+        console.error('[WS] Parse error:', e)
+      }
+    }
+    
+    wsConnection.onerror = (error) => {
+      console.error('[WS] Error:', error)
+    }
+    
+    wsConnection.onclose = () => {
+      console.log('[WS] Disconnected')
+      isRealtimeMode.value = false
+    }
+  } catch (e) {
+    console.error('[WS] Connection failed:', e)
+  }
+}
+
+// 断开 WebSocket 连接
+const disconnectWebSocket = () => {
+  if (wsConnection) {
+    wsConnection.close()
+    wsConnection = null
+  }
+  isRealtimeMode.value = false
+  realtimeDetections.value = []
+}
+
 // 分类配置
 const categories = {
   computer_vision: {
@@ -545,7 +604,9 @@ const executeAlgorithm = async () => {
       input_data: {
         video: uploadedFile.value.filePath || uploadedFile.value.url
       },
-      params: {}
+      params: {
+        ws_url: 'ws://localhost:8766'
+      }
     }
     
     // 调用算法API
@@ -599,6 +660,14 @@ onMounted(async () => {
   if (algorithmStore.algorithms.length > 0) {
     selectAlgorithm(algorithmStore.algorithms[0])
   }
+  
+  // 连接 WebSocket 服务器
+  connectWebSocket()
+})
+
+// 组件卸载时断开 WebSocket
+onUnmounted(() => {
+  disconnectWebSocket()
 })
 </script>