websocket优化关闭逻辑，补充登录请求websocket逻辑

src/App.vue

@@ -5,6 +5,7 @@
 </template>
 
 <script>
+import { mapGetters } from "vuex";
 export default {
   name: "app",
   data() {
@@ -16,28 +17,49 @@ export default {
       serverTimeoutObj: null, // 心跳倒计时
       timeoutnum: null, // 断开 重连倒计时
       lockReconnect: false, // 防止
-      websocket: null
+      websocket: null,
+      isClose: false,//是否关闭不重连
     };
   },
-  watch: {},
+  computed: {
+    ...mapGetters([
+      "token",
+      "userInfo"
+    ])
+  },
+  watch: {
+    token: {
+      handler (newVal) {
+        console.log('token', newVal ? true : false)
+        if(newVal) {
+          this.isClose = false;
+          if(this.userInfo) {
+            this.initWebSocket(this.userInfo.user_id);
+          }
+        }else{
+          this.isClose = true;
+          this.closeWebSocket();
+        }
+      }
+    }
+  },
   created() {
     window.addEventListener('beforeunload', e => this.closeWebSocket(e));
   },
-  mounted() {
-    this.initWebSocket('pc'); // userId为socket链接的参数
+  mounted() { 
+    // this.initWebSocket('pc');
   },
   beforeDestroy() {
-    window.addEventListener('beforeunload', e => this.closeWebSocket(e));
   },
   methods: {
     initWebSocket(supplierId) {
       // WebSocket与普通的请求所用协议有所不同，ws等同于http，wss等同于https
-      let wsUrl = `ws://171.16.8.51:81/websocket/${supplierId}`//`ws://192.168.3.32:81/websocket/${supplierId}`;
+      let wsUrl = `ws://192.168.3.32:81/websocket/${supplierId}`;//`ws://171.16.8.51:81/websocket/${supplierId}`//
       this.websocket = new WebSocket(wsUrl);
       this.websocket.onopen = this.websocketonopen;
       this.websocket.onerror = this.websocketonerror;
       this.websocket.onmessage = this.setOnmessageMessage;
-      this.websocket.onclose = this.websocketclose;
+      this.websocket.onclose = this.websocketClose();
     },
     start() {
       // console.log('start');
@@ -52,7 +74,7 @@ export default {
         }
         //定义一个延时器等待服务器响应，若超时，则关闭连接，重新请求server建立socket连接
         this.serverTimeoutObj = setTimeout(() => {
-          this.websocket.close();
+          this.websocketclose();
         }, this.timeout)
       }, this.timeout)
     },
@@ -70,7 +92,7 @@ export default {
       //没连接上会一直重连，设置延迟避免请求过多
       this.timeoutnum && clearTimeout(this.timeoutnum);
       this.timeoutnum = setTimeout(() => {
-        this.initWebSocket('pc');
+        this.initWebSocket(this.userInfo.user_id);
         this.lockReconnect = false;
       }, 5000)
     },
@@ -86,6 +108,9 @@ export default {
       // //发现消息进入    开始处理前端触发逻辑
       // if (event.data === 'success' || event.data === 'heartBath') return
     },
+    websocketClose() {
+      console.log("WebSocket连接关闭==============="); 
+    },
     websocketonopen() {
       //开启心跳
       this.start();
@@ -95,20 +120,24 @@ export default {
       console.log("WebSocket连接发生错误" + e);
     },
     websocketclose(e) {
-      this.websocket.close();
+      // this.websocket.close()
       clearTimeout(this.timeoutObj);
       clearTimeout(this.serverTimeoutObj);
-      console.log("WebSocket连接关闭");
+      console.log("WebSocket连接关闭重连"); 
       this.reconnect();//重连
     },
     websocketsend(messsage) {
       this.websocket.send(messsage)
     },
     closeWebSocket() { // 关闭websocket
-      this.websocket.close()
+      if(this.websocket) {
+        console.log("WebSocket连接关闭"); 
+        clearTimeout(this.timeoutObj);
+        clearTimeout(this.serverTimeoutObj);
+        this.websocket.close();
+      }
     },
   },
-  computed: {}
 };
 </script>
 <style lang="scss">

vue.config.js

@@ -39,8 +39,8 @@ module.exports = {
     proxy: {
       "/api": {
         //本地服务接口地址
-        target: 'http://192.168.1.34:81',
-        // target: 'http://192.168.3.32:81',
+        // target: 'http://192.168.1.34:81',
+        target: 'http://192.168.3.32:81',
         // target: 'http://192.168.1.102:81',
         ws: true,
         pathRewrite: {