Navbar增加长链接功能

src/layout/components/Navbar.vue

@@ -157,6 +157,7 @@ import {
   delEngineAccount,
 } from "@/api/setting";
 import request from "@/utils/request";
+import { getToken } from '@/utils/auth'
 
 export default {
   data() {
@@ -180,19 +181,24 @@ export default {
       },
       formLabelWidth: "100px",
       dialogFormVisible: false,
+      //websocket错误连接次数
+      wsConnectErrorTime:1,
+      websock: null,
+      lockReconnect:false,
     };
   },
   mounted() {
     const that = this;
     // 开定时器轮询未读消息接口(写在全局vuex里比较好)
     // that.initNotice();
-    that.tcMessage();
+    // that.tcMessage();
     this.intivalId = setInterval(function () {
       that.tcMessage();
     }, 5000);
     // this.timer = setInterval(function () {
     //   that.initNotice();
     // }, 3000);
+    this.initWebSocket();
   },
   created() {
     this.userInfo = JSON.parse(localStorage.getItem("supply_user"));
@@ -202,6 +208,8 @@ export default {
     window.clearInterval(this.timer);
 
     console.log("退出清理定时器" + this.timer);
+
+    this.websocketOnclose();
   },
   components: {
     Breadcrumb,
@@ -238,16 +246,22 @@ export default {
       });
     },
     async tcMessage() {
-      let res = await getRebateOrderMsg();
-      if (res.data.hasMessage) {
-        this.$notify.info({
-          title: "消息",
-          message: res.data.messages,
-          position: "bottom-right",
-          duration: 4000,
-          showClose: false,
-        });
+      let data = {
+        type: 'RebateOrderMsg',
+        params: {
+        }
       }
+      this.websocketSend(JSON.stringify(data))
+      // let res = await getRebateOrderMsg();
+      // if (res.data.hasMessage) {
+      //   this.$notify.info({
+      //     title: "消息",
+      //     message: res.data.messages,
+      //     position: "bottom-right",
+      //     duration: 4000,
+      //     showClose: false,
+      //   });
+      // }
     },
     goNotice() {
       this.$router.push("/notice/index");
@@ -362,6 +376,76 @@ export default {
     //     this.engineForm.engineList.splice(index, 1)
     //   }
     // }
+    initWebSocket: function () {
+      // WebSocket与普通的请求所用协议有所不同，ws等同于http，wss等同于https
+      var userId = this.$store.getters.userid;
+
+      var url = process.env.VUE_APP_BASE_API.replace("https://","wss://").replace("http://","ws://")+"websocket/"+userId;
+      console.debug(userId, url);
+      let token = getToken()
+      this.websock = new WebSocket(url, [token]);
+      this.websock.onopen = this.websocketOnopen;
+      this.websock.onerror = this.websocketOnerror;
+      this.websock.onmessage = this.websocketOnmessage;
+      this.websock.onclose = this.websocketOnclose;
+    },
+    websocketOnopen: function () {
+      console.debug("WebSocket连接成功");
+      //心跳检测重置
+      //this.heartCheck.reset().start();
+    },
+    websocketOnerror: function (e) {
+      console.debug("WebSocket连接发生错误，第%s次",this.wsConnectErrorTime);
+
+      this.wsConnectErrorTime = this.wsConnectErrorTime + 1;
+      if(this.wsConnectErrorTime>5){
+        console.debug("WebSocket连接错误超过5次，就不再重新连了！");
+        this.lockReconnect = true
+        return;
+      }
+
+      this.reconnect();
+    },
+    websocketOnmessage: function (e) {
+      console.debug("-----接收消息-------",e.data);
+      let data = eval("(" + e.data + ")"); //解析对象
+      if (data.type === 'RebateOrderMsg') {
+        if (data.res.hasMessage) {
+          this.$notify.info({
+            title: "消息",
+            message: res.data.messages,
+            position: "bottom-right",
+            duration: 4000,
+            showClose: false,
+          });
+        }
+      }
+    },
+    websocketOnclose: function (e) {
+      console.debug("connection closed (" + e + ")");
+      if(e){
+        console.debug("connection closed (" + e.code + ")");
+      }
+      this.reconnect();
+    },
+    websocketSend(text) { // 数据发送
+      try {
+        this.websock.send(text);
+      } catch (err) {
+        console.debug("send failed (" + err.code + ")");
+      }
+    },
+    reconnect() {
+      var that = this;
+      if(that.lockReconnect) return;
+      that.lockReconnect = true;
+      //没连接上会一直重连，设置延迟避免请求过多
+      setTimeout(function () {
+        console.debug("尝试重连...");
+        that.initWebSocket();
+        that.lockReconnect = false;
+      }, 20000);
+    },
   },
 };
 </script>