处理socket连接断开

src/eventBus.ts

@@ -17,8 +17,7 @@ export type ErrorModalData = {
 export type ConsumeType = 'Plate' | 'LittleBuf' | 'BigBuf' | 'Tip'
 type Events = {
   initDevice: void,
-  AppTubeSettingUpdateEvent: void,
-  confirm: { type: ConsumeType; value: number; index: number }
+  socketClosed: number,
   'show-error-modal': ErrorModalData
   'show-stack-modal': ErrorModalData['stackInfo'] | null | undefined
 }

src/pages/Index/Index.vue

@@ -232,8 +232,8 @@
     <LoadingModal
       v-if="showDeviceWaitingModal"
       :visible="showDeviceWaitingModal"
-      title="设备正在响应中"
-      message="请不要有任何手动操作！"
+      :title="deviceWaitingModelInfo.title"
+      :message="deviceWaitingModelInfo.message"
       :showBtns="false"
     />
     <!-- 自动自检已完成 -->
@@ -252,13 +252,13 @@
     <InitWarn
       v-if="showFailModal"
       :visible="showFailModal"
-      title="检测失败"
-      :message="failMessage"
+      :title="failMessage.title"
+      :message="failMessage.message"
       icon="/src/assets/Warn.svg"
       cancelText="返回"
       confirmText="重试"
       @close="showFailModal = false"
-      @confirm="startInit"
+      @confirm="confirmFail"
     />
     <InitWarn
       v-if="idCardInserted"
@@ -350,6 +350,10 @@ const lineLeft = ref(0)
 const showModal = ref(false)
 const showDeviceResettingModal = ref(false)
 const showDeviceWaitingModal = ref(false)
+const deviceWaitingModelInfo = ref({
+  title: '设备正在响应中',
+  message: '请不要有任何手动操作！',
+})
 const showAlreadyModal = ref(false)
 const showFailModal = ref(false)
 // const checkData = ref<CheckItem[]>([]);
@@ -361,7 +365,11 @@ const settingTubeStore = useSettingTestTubeStore()
 const tubeRackStore = useTestTubeStore()
 const emergencyStore = useEmergencyStore()
 
-const failMessage = ref('') // 存储动态生成的错误信息
+const failMessage = ref({
+  title: '检测失败',
+  message: '',
+}) // 存储动态生成的错误信息
+
 const idCardInserted = ref(false) // id卡插入状态
 //事件状态
 const EventText = ref<string>('闲置...')
@@ -407,6 +415,27 @@ const onConfirmReport = async () => {
   }
 }
 
+const handleSocketClose = (num: number) => {
+  if (num === 0) {
+    // 提示用户，连接断开，正尝试重新连接
+    deviceWaitingModelInfo.value = {
+      title: '连接断开，正在尝试重新连接',
+      message: '请不要有任何手动操作！',
+    }
+    showDeviceWaitingModal.value = true
+  } else if (num === 5) {
+    // 重试达到最大次数，重试，取消。
+    failMessage.value = {
+      title: '恢复连接失败',
+      message: '未能恢复连接，建议重启设备',
+    }
+    showFailModal.value = true
+  } else if (num === -1) {
+    // 从断开 到 恢复连接， 关闭弹框
+    showDeviceWaitingModal.value = false
+  }
+}
+
 // 处理应用事件消息
 const handleAppEvent = (data: AppEventMessage['data']) => {
   console.log('🚀 ~ handleAppEvent ~ data:', data)
@@ -436,6 +465,15 @@ const onLogout = () => {
   })
 }
 
+const confirmFail = async () => {
+  showFailModal.value = false
+  if (failMessage.value.title.match('连接失败')) {
+    wsEvent.connect()
+    wsState.connect()
+  } else {
+    await startInit()
+  }
+}
 //确认错误事件
 const confirmError = async () => {
   showErrorModal.value = false
@@ -514,6 +552,7 @@ const getBloodTypeList = async () => {
 }
 onMounted(() => {
   eventBus.on('initDevice', showInitDeviceAlert)
+  eventBus.on('socketClosed', handleSocketClose)
 
   wsEvent.subscribe<AppEventMessage>('AppEvent', handleAppEvent)
   wsEvent.connect()
@@ -570,6 +609,10 @@ onMounted(() => {
 // };
 
 const untilDeviceReady = async () => {
+  deviceWaitingModelInfo.value = {
+    title: '设备正在响应中',
+    message: '请不要有任何手动操作！',
+  }
   showDeviceWaitingModal.value = true
   const res = await getDeviceWorkState()
   if (res.ecode === 'SUC') {
@@ -591,6 +634,10 @@ const startTest = async () => {
     return
   }
   try {
+    deviceWaitingModelInfo.value = {
+      title: '设备正在响应中',
+      message: '请不要有任何手动操作！',
+    }
     showDeviceWaitingModal.value = true
     const res = await startWork()
     showDeviceWaitingModal.value = false
@@ -606,6 +653,10 @@ const startTest = async () => {
 
 // 暂停测试
 const pauseTest = async () => {
+  deviceWaitingModelInfo.value = {
+    title: '设备正在响应中',
+    message: '请不要有任何手动操作！',
+  }
   showDeviceWaitingModal.value = true
   const res = await pauseWork()
   showDeviceWaitingModal.value = false
@@ -618,6 +669,10 @@ const pauseTest = async () => {
 
 // 停止测试时清除标记
 const stopTest = async () => {
+  deviceWaitingModelInfo.value = {
+    title: '设备正在响应中',
+    message: '请不要有任何手动操作！',
+  }
   showDeviceWaitingModal.value = true
   const res = await stopWork()
   showDeviceWaitingModal.value = false
@@ -629,6 +684,10 @@ const stopTest = async () => {
 }
 //继续测试
 const continueTest = async () => {
+  deviceWaitingModelInfo.value = {
+    title: '设备正在响应中',
+    message: '请不要有任何手动操作！',
+  }
   showDeviceWaitingModal.value = true
   const res = await continueWork()
   showDeviceWaitingModal.value = false
@@ -662,10 +721,13 @@ const pollingInitState = async () => {
         showAlreadyModal.value = true
       } else {
         const infos = res.data.promopt.detailInfos
-        failMessage.value =
-          infos && infos.length > 0
-            ? infos.map((d: any) => d.name).join('\n')
-            : res.data.promopt.info
+        failMessage.value = {
+          title: '检测失败',
+          message:
+            infos && infos.length > 0
+              ? infos.map((d: any) => d.name).join('\n')
+              : res.data.promopt.info,
+        }
         showFailModal.value = true // 显示失败弹窗
       }
     }

src/pages/Index/TestTube/TubeUserId.vue

@@ -89,7 +89,6 @@ import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 import * as R from 'ramda'
 import { useTestTubeStore } from '../../../store'
-import { eventBus } from '../../../eventBus'
 import SimpleKeyboard from '../../../components/SimpleKeyboard.vue'
 import Tube from '../components/TestTube/Tube.vue'
 import { updateTubeConfig } from '../../../services'
@@ -141,7 +140,6 @@ const confirmChange = async () => {
   })
   if (res.success) {
     tubeStore.tubeRack.tubeSettings = settings
-    eventBus.emit('AppTubeSettingUpdateEvent');
     goBack()
   } else {
     eMessage.error('更新失败')

src/websocket/socket.ts

@@ -1,4 +1,7 @@
 // src/websocket/socket.ts
+
+import { eventBus } from "@/eventBus"
+
 // 基础消息接口
 interface BaseMessage {
   messageType: 'Report' // 消息类型
@@ -352,7 +355,7 @@ type MessageHandler<T extends WebSocketMessage> = (data: T['data']) => void
 class WebSocketClient {
   private ws: WebSocket | null = null
   private url: string
-  private reconnectAttempts: number = 0
+  private reconnectAttempts: number = -1
   private maxReconnectAttempts: number = 5
   private reconnectInterval: number = 3000
 
@@ -432,8 +435,13 @@ class WebSocketClient {
 
     // 连接建立时的处理
     this.ws.onopen = () => {
+      if (this.reconnectAttempts !== -1) {
+        // 从断开连接 进入 恢复连接
+        this.reconnectAttempts = -1
+        eventBus.emit('socketClosed', -1)
+      }
       console.log('WebSocket 连接已建立')
-      this.reconnectAttempts = 0 // 重置重连次数
+      this.reconnectAttempts = -1 // 重置重连次数
     }
 
     // 接收消息的处理
@@ -450,6 +458,7 @@ class WebSocketClient {
     // 连接关闭时的处理
     this.ws.onclose = () => {
       console.log('WebSocket 连接已关闭')
+      eventBus.emit('socketClosed', 0)
       this.reconnect()
     }
 
@@ -461,8 +470,13 @@ class WebSocketClient {
 
   // 重连机制
   private reconnect(): void {
+    if (this.reconnectAttempts === -1) {
+      this.reconnectAttempts = 0
+    }
     if (this.reconnectAttempts >= this.maxReconnectAttempts) {
+      eventBus.emit('socketClosed', this.maxReconnectAttempts)
       console.log('达到最大重连次数，停止重连')
+      this.reconnectAttempts = -1
       return
     }