优化wss连接

src/App.vue

@@ -33,6 +33,7 @@ import { scanSendMessage } from '@/api/order/index'
 import { useGlobal } from '@/store/global.js'
 import { useSocket } from '@/store/socket.js'
 import { usePrint } from '@/store/print.js'
+import ReconnectingWebSocket from 'reconnecting-websocket';
 
 const global = useGlobal()
 const socketStore = useSocket()
@@ -113,10 +114,12 @@ function initWebSocket(wsUrl = import.meta.env.VITE_API_WSS) {
   createUUID()
 
   wsIsClose.value = false
-  ws.value = new WebSocket(wsUrl);
+  ws.value = new ReconnectingWebSocket(wsUrl, null, {
+    reconnectInterval: 10000
+  })
   // console.log("websocket:", ws.value);
 
-  ws.value.onopen = function () {
+  ws.value.addEventListener('open', function (event) {
     console.log('wss连接成功');
     socketStore.changeOnline(true)
 
@@ -135,14 +138,37 @@ function initWebSocket(wsUrl = import.meta.env.VITE_API_WSS) {
       shopId: store.userInfo.shopId,
       clientId: uuid.value
     }))
-  };
+  })
 
-  // 接收消息
-  ws.value.onmessage = function (e) {
-    // websocketonmessage(e);
+  // ws.value.onopen = function () {
+  //   console.log('wss连接成功');
+  //   socketStore.changeOnline(true)
+
+  //   // 清除心跳
+  //   clearInterval(heartbeatTimer.value)
+  //   heartbeatTimer.value = null
+  //   startheartbeat()
+
+  //   // 清除重连
+  //   clearInterval(reConnectTimer.value)
+  //   reConnectTimer.value = null
+  //   reConnectCount.value = 0
+
+  //   ws.value.send(JSON.stringify({
+  //     type: "connect",
+  //     shopId: store.userInfo.shopId,
+  //     clientId: uuid.value
+  //   }))
+  // };
+
+  ws.value.addEventListener('message', function (e) {
     let data = JSON.parse(e.data)
     if (data.type == 'order') {
       console.log('接收消息', data);
+      ws.value.send(JSON.stringify({
+        type: "send",
+        orderNo: data.orderInfo.orderNo
+      }))
       // 接收订单消息，打印小票
       // printBill(data)
 
@@ -150,10 +176,33 @@ function initWebSocket(wsUrl = import.meta.env.VITE_API_WSS) {
       // checkLabelPrint(data)
       printStore.labelPrint(data)
     }
-  };
+  })
 
-  // 连接发生错误
-  ws.value.onerror = function () {
+  // 连接已关闭或无法打开
+  ws.value.addEventListener('WebSocket.CLOSED', function () {
+
+  })
+
+  // 接收消息
+  // ws.value.onmessage = function (e) {
+  //   // websocketonmessage(e);
+  //   let data = JSON.parse(e.data)
+  //   if (data.type == 'order') {
+  //     console.log('接收消息', data);
+  //     ws.value.send(JSON.stringify({
+  //       type: "send",
+  //       orderNo: data.orderInfo.orderNo
+  //     }))
+  //     // 接收订单消息，打印小票
+  //     // printBill(data)
+
+  //     // 检测是否需要打印标签小票
+  //     // checkLabelPrint(data)
+  //     printStore.labelPrint(data)
+  //   }
+  // };
+
+  ws.value.addEventListener('error', function () {
     console.log("WebSocket连接发生错误");
     socketStore.changeOnline(false)
 
@@ -163,10 +212,22 @@ function initWebSocket(wsUrl = import.meta.env.VITE_API_WSS) {
 
     // 手动关闭后不在执行自动连接任务
     if (!wsIsClose.value) reConnect(wsUrl);
-  };
+  })
 
-  // 关闭
-  ws.value.onclose = function (e) {
+  // 连接发生错误
+  // ws.value.onerror = function () {
+  //   console.log("WebSocket连接发生错误");
+  //   socketStore.changeOnline(false)
+
+  //   // 清除心跳
+  //   clearInterval(heartbeatTimer.value)
+  //   heartbeatTimer.value = null
+
+  //   // 手动关闭后不在执行自动连接任务
+  //   if (!wsIsClose.value) reConnect(wsUrl);
+  // };
+
+  ws.value.addEventListener('error', function (e) {
     console.log('ws关闭了', e);
     socketStore.changeOnline(false)
 
@@ -176,13 +237,27 @@ function initWebSocket(wsUrl = import.meta.env.VITE_API_WSS) {
 
     // 手动关闭后不在执行自动连接任务
     if (!wsIsClose.value) reConnect(wsUrl);
-  };
+  })
+
+  // 关闭
+  // ws.value.onclose = function (e) {
+  //   console.log('ws关闭了', e);
+  //   socketStore.changeOnline(false)
+
+  //   // 清除心跳
+  //   clearInterval(heartbeatTimer.value)
+  //   heartbeatTimer.value = null
+
+  //   // 手动关闭后不在执行自动连接任务
+  //   if (!wsIsClose.value) reConnect(wsUrl);
+  // };
 }
 
 // 启动心跳连接
 let heartbeatTimer = ref(null)
 function startheartbeat() {
   heartbeatTimer.value = setInterval(() => {
+    console.log('发送心跳');
     ws.value.send(JSON.stringify({ type: 'heartbeat' }))
   }, 10000)
 }
@@ -192,6 +267,7 @@ let reConnectCount = ref(0)
 let reConnectTimer = ref(null)
 function reConnect(wsUrl) {
   if (reConnectTimer.value != null) return
+  ws.value.reconnect();
   reConnectTimer.value = setInterval(() => {
     // 自动连接超过5次不在连接，需手动出发
     // console.log('reConnectCount.value===', reConnectCount.value);
@@ -204,11 +280,41 @@ function reConnect(wsUrl) {
     //   ws.value.close()
     // } else {
     // }
-    reConnectCount.value++
-    initWebSocket(wsUrl)
-  }, 5000)
+    // reConnectCount.value++
+    // initWebSocket(wsUrl)
+    ws.value.reconnect();
+  }, 1000)
 }
 
+
+
+// 监听网络
+function updateInfo() {
+  // 获取网络状态
+  let isOnLine = navigator.onLine
+  // 获取网络信息
+  let info = navigator.connection
+
+  console.log('isOnLine===', isOnLine);
+  console.log('info===', info);
+  if (isOnLine) {
+    console.log('有网了，重连ws连接');
+    reConnect()
+  } else {
+    console.log('没网了，断开ws连接');
+    ws.value.close()
+
+    // 清除重连
+    clearInterval(reConnectTimer.value)
+    reConnectTimer.value = null
+
+    clearInterval(heartbeatTimer.value)
+    heartbeatTimer.value = null
+  }
+}
+
+
+
 const nextCodeRef = ref('')
 const lastTimeRef = ref('')
 const codeRef = ref('')
@@ -304,6 +410,12 @@ onMounted(() => {
   document.addEventListener('keydown', (e) => {
     getBarCode(e)
   })
+  // 监听网络在线状态
+  window.addEventListener("onLine", updateInfo)
+  // 监听网络离线
+  window.addEventListener("offLine", updateInfo)
+  // 监听网络信息变化
+  navigator.connection.addEventListener('change', updateInfo)
 })
 
 </script>