优化wss连接

2024-07-04 10:04:01 +08:00 · 2024-07-04 10:04:01 +08:00 · c7758f66d7
parent 78672a0cf9
commit c7758f66d7
7 changed files with 162 additions and 44 deletions
--- a/.env.development
+++ b/.env.development
@ -8,8 +8,9 @@ VITE_API_WSS = 'wss://cashier.sxczgkj.cn/client'
 #测试ws
 # VITE_API_WSS = 'wss://wxcashiertest.sxczgkj.cn/client'

-# 测试
-# VITE_API_URL = 'https://cashier-client.sxczgkj.cn/cashier-client'
+# 阿伟本地ws
+# 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'
--- a/.env.production
+++ b/.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_URL = 'https://cashierclient.sxczgkj.cn/cashier-client/'
+# VITE_API_WSS = 'wss://wxcashiertest.sxczgkj.cn/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://cashier-client.sxczgkj.cn/cashier-client'
+
+# 线上环境接口地址
+VITE_API_URL = 'https://cashierclient.sxczgkj.cn/cashier-client/'
--- a/package.json
+++ b/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",
--- a/src/App.vue
+++ b/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>
--- a/src/store/user.js
+++ b/src/store/user.js
@ -1,23 +1,24 @@
-import { defineStore } from "pinia"
-import { login } from '@/api/user'
-import useStorage from '@/utils/useStorage'
+import { defineStore } from "pinia";
+import { login } from "@/api/user";
+import useStorage from "@/utils/useStorage";

 export const useUser = defineStore({
  id: "user",
  state: () => ({
-    userInfo: useStorage.get('userInfo'),
-    token: useStorage.get('token'),
+    userInfo: useStorage.get("userInfo"),
+    token: useStorage.get("token"),
  }),
  actions: {
    // 登录
    userlogin(param) {
-      return login(param).then(res => {
-        this.userInfo = res
-        this.token = res.token
+      return login(param).then((res) => {
+        this.userInfo = res;
+        this.token = res.token;
        useStorage.set("token", this.token);
+        // this.userInfo.shopId = "24";
        useStorage.set("userInfo", this.userInfo);
        return this.userInfo;
-      })
-    }
-  }
-})
+      });
+    },
+  },
+});
--- a/src/views/group_buy/index.vue
+++ b/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: [],
--- a/src/views/login.vue
+++ b/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({
-          token: res.token,
-          loginName: res.loginName,
-          clientType: 'pc'
-        })
-        useStorage.set('douyin', douyin.userInfo)
+        // const douyin = await douyincheckIn({
+        //   token: res.token,
+        //   loginName: res.loginName,
+        //   clientType: 'pc'
+        // })
+        // useStorage.set('douyin', douyin.userInfo)
        ElMessage.success("登录成功");
        setTimeout(() => {
          router.replace({