优化wss连接

.env.development

@@ -8,8 +8,9 @@ VITE_API_WSS = 'wss://cashier.sxczgkj.cn/client'
 #测试ws
 # VITE_API_WSS = 'wss://wxcashiertest.sxczgkj.cn/client'
 
-# 测试
+# 阿伟本地ws
-# VITE_API_URL = 'https://cashier-client.sxczgkj.cn/cashier-client'
+# VITE_API_WSS = 'ws://192.168.2.17:9998/client'
+
 
 # 测试 php
 VITE_API_PHP_URL = 'http://192.168.2.33:1666/index.php/api'
@@ -20,5 +21,8 @@ VITE_API_PHP_URL = 'http://192.168.2.33:1666/index.php/api'
 # 鹏辉
 # VITE_API_URL = 'http://192.168.2.41:10589/cashier-client'
 
+# 测试
+# VITE_API_URL = 'https://cashier-client.sxczgkj.cn/cashier-client'
+
 # 正式
 VITE_API_URL = 'https://cashierclient.sxczgkj.cn/cashier-client'

.env.production

@@ -2,16 +2,16 @@
 ENV = production
 
 # 正式ws
-# VITE_API_WSS = 'wss://cashier.sxczgkj.cn/client'
+VITE_API_WSS = 'wss://cashier.sxczgkj.cn/client'
 
 #测试ws
-VITE_API_WSS = 'wss://wxcashiertest.sxczgkj.cn/client'
+# VITE_API_WSS = 'wss://wxcashiertest.sxczgkj.cn/client'
-
-# 线上环境接口地址
-VITE_API_URL = 'https://cashierclient.sxczgkj.cn/cashier-client/'
 
 # 测试 php
 VITE_API_PHP_URL = 'http://192.168.2.33:1666/index.php/api'
 
 # 测试
 # VITE_API_URL = 'https://cashier-client.sxczgkj.cn/cashier-client'
+
+# 线上环境接口地址
+VITE_API_URL = 'https://cashierclient.sxczgkj.cn/cashier-client/'

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "vite-electron",
 	"private": true,
-	"version": "1.3.26",
+	"version": "1.3.36",
 	"main": "dist-electron/main.js",
 	"scripts": {
 		"dev": "chcp 65001 && vite",
@@ -19,6 +19,7 @@
 		"lodash": "^4.17.21",
 		"pinia": "^2.1.7",
 		"qrcode": "^1.5.3",
+		"reconnecting-websocket": "^4.4.0",
 		"serialport": "^12.0.0",
 		"swiper": "^11.1.1",
 		"uuid": "^10.0.0",

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.onopen = function () {
-  ws.value.onmessage = function (e) {
+  //   console.log('wss连接成功');
-    // websocketonmessage(e);
+  //   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++
+    // reConnectCount.value++
-    initWebSocket(wsUrl)
+    // initWebSocket(wsUrl)
-  }, 5000)
+    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>

src/store/user.js

@@ -1,23 +1,24 @@
-import { defineStore } from "pinia"
+import { defineStore } from "pinia";
-import { login } from '@/api/user'
+import { login } from "@/api/user";
-import useStorage from '@/utils/useStorage'
+import useStorage from "@/utils/useStorage";
 
 export const useUser = defineStore({
   id: "user",
   state: () => ({
-    userInfo: useStorage.get('userInfo'),
+    userInfo: useStorage.get("userInfo"),
-    token: useStorage.get('token'),
+    token: useStorage.get("token"),
   }),
   actions: {
     // 登录
     userlogin(param) {
-      return login(param).then(res => {
+      return login(param).then((res) => {
-        this.userInfo = res
+        this.userInfo = res;
-        this.token = res.token
+        this.token = res.token;
         useStorage.set("token", this.token);
+        // this.userInfo.shopId = "24";
         useStorage.set("userInfo", this.userInfo);
         return this.userInfo;
-      })
+      });
-    }
+    },
-  }
+  },
-})
+});

src/views/group_buy/index.vue

@@ -132,7 +132,7 @@ const refundDialogRef = ref(null)
 const tableData = reactive({
     resetLoading: false,
     proName: '',
-    type: 2,
+    type: 1,
     status: '',
     loading: false,
     list: [],

src/views/login.vue

@@ -109,12 +109,12 @@ const submitHandle = () => {
     if (valid) {
       loading.value = true;
       store.userlogin(form).then(async (res) => {
-        const douyin = await douyincheckIn({
+        // const douyin = await douyincheckIn({
-          token: res.token,
+        //   token: res.token,
-          loginName: res.loginName,
+        //   loginName: res.loginName,
-          clientType: 'pc'
+        //   clientType: 'pc'
-        })
+        // })
-        useStorage.set('douyin', douyin.userInfo)
+        // useStorage.set('douyin', douyin.userInfo)
         ElMessage.success("登录成功");
         setTimeout(() => {
           router.replace({