refactor: improved WebSocket handling

Author: 0xJacky

app/package.json

@@ -43,7 +43,6 @@
     "nprogress": "^0.2.0",
     "pinia": "^3.0.4",
     "pinia-plugin-persistedstate": "^4.7.1",
-    "reconnecting-websocket": "^4.4.0",
     "sortablejs": "^1.15.6",
     "splitpanes": "^4.0.4",
     "sse.js": "^2.7.2",

app/src/api/analytic.ts

@@ -1,5 +1,4 @@
 import { http } from '@uozi-admin/request'
-import ws from '@/lib/websocket'
 
 export interface CPUInfoStat {
   cpu: number
@@ -120,12 +119,8 @@ const analytic = {
   init(): Promise<AnalyticInit> {
     return http.get('/analytic/init')
   },
-  server() {
-    return ws('/api/analytic')
-  },
-  nodes() {
-    return ws('/api/analytic/nodes')
-  },
+  serverWebSocketUrl: '/api/analytic',
+  nodesWebSocketUrl: '/api/analytic/nodes',
 }
 
 export default analytic

app/src/api/llm.ts

@@ -1,6 +1,4 @@
-import type ReconnectingWebSocket from 'reconnecting-websocket'
 import { http } from '@uozi-admin/request'
-import ws from '@/lib/websocket'
 
 export interface ChatComplicationMessage {
   role: string
@@ -41,9 +39,7 @@ const llm = {
   store_messages(data: { file_name?: string, messages?: ChatComplicationMessage[] }) {
     return http.post('/llm_messages', data)
   },
-  code_completion() {
-    return ws('/api/code_completion') as ReconnectingWebSocket
-  },
+  codeCompletionWebSocketUrl: '/api/code_completion',
   get_code_completion_enabled_status() {
     return http.get<{ enabled: boolean }>('/code_completion/enabled')
   },

app/src/api/node.ts

@@ -5,15 +5,58 @@ export interface Node extends ModelBase {
   name: string
   url: string
   token: string
-  status?: boolean
-  response_at?: Date
+  status: boolean
+  enabled: boolean
+  response_at?: string
+}
+
+export interface NodeStatus {
+  avg_load: {
+    load1: number
+    load5: number
+    load15: number
+  }
+  cpu_percent: number
+  memory_percent: number
+  disk_percent: number
+  network: {
+    name: string
+    bytesSent: number
+    bytesRecv: number
+    packetsSent: number
+    packetsRecv: number
+    errin: number
+    errout: number
+    dropin: number
+    dropout: number
+    fifoin: number
+    fifoout: number
+  }
+  status: boolean
+  response_at?: string
+  upstream_status_map: {
+    [key: string]: {
+      online: boolean
+      latency: number
+    }
+  }
 }
 
 export interface NodeInfo {
-  id: number
-  name: string
-  token: string
-  response_at?: Date
+  node_runtime_info: {
+    os: string
+    arch: string
+    ex_path: string
+    cur_version: string
+    in_docker: boolean
+  }
+  version: string
+  cpu_num: number
+  memory_total: string
+  disk_total: string
+}
+
+export interface AnalyticNode extends Node, NodeInfo, NodeStatus {
 }
 
 const baseUrl = '/nodes'

app/src/api/self_check.ts

@@ -1,7 +1,6 @@
 import type { Container } from '@/language'
 import type { CosyError } from '@/lib/http'
 import { http } from '@uozi-admin/request'
-import ws from '@/lib/websocket'
 
 export const ReportStatus = {
   Success: 'success',
@@ -27,9 +26,7 @@ const selfCheck = {
   fix(taskName: string) {
     return http.post(`/self_check/${taskName}/fix`)
   },
-  websocket() {
-    return ws('/api/self_check/websocket', false)
-  },
+  websocketUrl: '/api/self_check/websocket',
   timeoutCheck() {
     return http.get('/self_check/timeout')
   },

app/src/api/site_navigation.ts

@@ -1,6 +1,5 @@
 import type { SiteStatusType } from '@/constants/site-status'
 import { http } from '@uozi-admin/request'
-import ws from '@/lib/websocket'
 
 export interface SiteInfo {
   id: number // primary identifier for API operations
@@ -144,8 +143,6 @@ export const siteNavigationApi = {
     return http.post(`/site_navigation/test_health_check/${id}`, { config })
   },
 
-  // WebSocket connection using lib/websocket
-  createWebSocket() {
-    return ws('/api/site_navigation_ws', true)
-  },
+  // WebSocket URL for real-time updates
+  websocketUrl: '/api/site_navigation_ws',
 }

app/src/api/upstream.ts

@@ -1,5 +1,4 @@
 import { http } from '@uozi-admin/request'
-import ws from '@/lib/websocket'
 
 export interface UpstreamStatus {
   online: boolean
@@ -45,10 +44,8 @@ const upstream = {
     return http.get('/upstream/availability')
   },
 
-  // WebSocket interface for real-time availability updates
-  availabilityWebSocket() {
-    return ws('/api/upstream/availability_ws')
-  },
+  // WebSocket URL for real-time availability updates
+  availabilityWebSocketUrl: '/api/upstream/availability_ws',
 
   // Get all sockets with their configuration and health status
   getSocketList(): Promise<SocketListResponse> {

app/src/components/CodeEditor/CodeCompletion.ts

@@ -1,10 +1,10 @@
 import type { Editor } from 'ace-builds'
 import type { Point } from 'ace-builds-internal/document'
-import type ReconnectingWebSocket from 'reconnecting-websocket'
 import ace from 'ace-builds'
 import { debounce } from 'lodash'
 import { v4 as uuidv4 } from 'uuid'
 import llm from '@/api/llm'
+import { useWebSocket } from '@/lib/websocket'
 
 function debug(...args: unknown[]) {
   if (import.meta.env.DEV) {
@@ -43,7 +43,7 @@ function useCodeCompletion() {
   const lastTriggerTime = ref<number>(0)
   const lastTriggerPosition = ref<{ row: number, column: number } | null>(null)
 
-  const ws = shallowRef<ReconnectingWebSocket>()
+  const ws = shallowRef<WebSocket>()
 
   // Check if the current file is a configuration file
   function checkIfConfigFile(filename: string, content: string): boolean {
@@ -496,7 +496,8 @@ function useCodeCompletion() {
       return
     }
 
-    ws.value = llm.code_completion()
+    const { ws: wsRef } = useWebSocket(llm.codeCompletionWebSocketUrl, false)
+    ws.value = wsRef.value!
 
     editorRef.value = editor
 

app/src/components/GeoLiteDownload/GeoLiteDownload.vue

@@ -3,7 +3,7 @@ import type { Ref } from 'vue'
 import { CheckCircleOutlined, DownloadOutlined, InfoCircleOutlined } from '@ant-design/icons-vue'
 import geolite from '@/api/geolite'
 import { formatDateTime } from '@/lib/helper'
-import websocket from '@/lib/websocket'
+import { useWebSocket } from '@/lib/websocket'
 
 interface Emits {
   (e: 'downloadComplete'): void
@@ -55,16 +55,17 @@ function downloadGeoLiteDB() {
   downloadProgress.value = 0
   downloadMessage.value = $gettext('Starting download...')
 
-  const ws = websocket('/api/geolite/download', false)
+  const { ws } = useWebSocket('/api/geolite/download', false)
+  const socket = ws.value!
 
   let isFailed = false
   let currentPhase = 'download' // 'download' or 'decompress'
 
-  ws.onopen = () => {
-    // WebSocket connected, server will start download
+  socket.onopen = () => {
+    socket.send('start')
   }
 
-  ws.onmessage = async m => {
+  socket.onmessage = async m => {
     const r = JSON.parse(m.data)
 
     // Update message and detect phase changes
@@ -99,13 +100,13 @@ function downloadGeoLiteDB() {
     }
   }
 
-  ws.onerror = () => {
+  socket.onerror = () => {
     isFailed = true
     downloadStatus.value = 'exception'
     downloadMessage.value = $gettext('Download failed')
   }
 
-  ws.onclose = async () => {
+  socket.onclose = async () => {
     if (isFailed) {
       downloading.value = false
       return

app/src/components/NamespaceTabs/NamespaceTabs.vue

@@ -53,7 +53,7 @@ const loading = ref({
 const currentNamespace = computed(() => {
   if (!modelValue.value || modelValue.value === 0)
     return null
-  return namespaces.value.find(g => g.id === Number(modelValue.value))
+  return namespaces.value.find(g => g.id === modelValue.value)
 })
 
 // Get the list of nodes in the current group
@@ -74,7 +74,7 @@ async function handleReloadNginx() {
   if (!currentNamespace.value || !syncNodes.value.length)
     return
 
-  const nodeIds = syncNodes.value.map(node => node.id)
+  const nodeIds = syncNodes.value.map(node => node.id).filter(id => id !== undefined)
 
   loading.value.reload = true
   try {
@@ -94,7 +94,7 @@ async function handleRestartNginx() {
   if (!currentNamespace.value || !syncNodes.value.length)
     return
 
-  const nodeIds = syncNodes.value.map(node => node.id)
+  const nodeIds = syncNodes.value.map(node => node.id).filter(id => id !== undefined)
 
   loading.value.restart = true
   try {