optimize: WebSocket连接移入layout组件中

src/App.vue

@@ -5,69 +5,19 @@
 </template>
 
 <script>
-import { mapMutations } from 'vuex'
 export default {
     data() {
         return {
-            list:[],
-            timer: null,
-            wsInstance: null
+            list:[]
         }
     },
-    computed: {
-        isLogin () {
-            return this.$store.state.comVal.isLogin
-        } 
-    },
     mounted: function () {
         
     },
     created: function () {
-        let token = this.$store.state.comVal.token || localStorage.getItem('token')
-        if (token) {
-            this.SAVE_COMMON_VALUE({
-                'key': 'isLogin',
-                'value': true
-            })
-        }
+
     },
     methods: {
-        ...mapMutations(['SAVE_COMMON_VALUE']),
-    },
-    watch: {
-        isLogin (newVal, oldVal) {
-            // console.log('newVal, oldVal: ', newVal, oldVal);
-            if (newVal) {
-                let token = this.$store.state.comVal.token || localStorage.getItem('token')
-                //申请一个WebSocket对象，参数是服务端地址，同http协议使用http://开头一样，WebSocket协议的url使用ws://开头，另外安全的WebSocket协议使用wss://开头
-                this.wsInstance = new WebSocket(`wss://ws.ijolijoli.com?access_token=${token}`);
-                this.wsInstance.onopen = () => {
-                    //当WebSocket创建成功时，触发onopen事件
-                    console.log("连接成功");
-                    this.timer = setInterval(() => {
-                        this.wsInstance.send(JSON.stringify({type:'ping'}));
-                    }, 30000);
-                }
-                this.wsInstance.onmessage = (e) => {
-                    //当客户端收到服务端发来的消息时，触发onmessage事件，参数e.data包含server传递过来的数据
-                    console.log('收到消息',e.data)
-                    let data = JSON.parse(e.data);
-                    console.log(data)
-                }
-                this.wsInstance.onclose = (e) => {
-                    //当客户端收到服务端发送的关闭连接请求时，触发onclose事件
-                    console.log("连接已关闭");
-                }
-                this.wsInstance.onerror = (e) => {
-                    //如果出现连接、处理、接收、发送数据失败的时候触发onerror事件
-                    console.log(e);
-                }
-            } else {
-                // console.log('清除定时器并关闭连接-不再send心跳ping')
-                this.wsInstance.close()
-                clearInterval(this.timer)
-            }
-        }
     }
 }
 </script>

src/components/common/layout/layout.vue

@@ -22,7 +22,10 @@
           {{$route.name}}
         </div>
         <div class="right">
-          <div @click="onAppMessage" class="news"><img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/news.png"></div>
+          <div @click="onAppMessage" class="news">
+            <span class="dot"></span>
+            <img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/news.png" />
+          </div>
           <div class="head-img"><img :src="userInfo.avatar_url"></div>
           <el-dropdown trigger="click"
                        placement="top"
@@ -68,11 +71,39 @@ export default {
       userInfo: {
         name: '333'
       },
-      msgPupopVisible: false
+      msgPupopVisible: false,
+      timer: null,
+      wsInstance: null
     }
   },
   created () {
     this.getUserInfo()
+
+      console.log('开始连接...')
+      let token = this.$store.state.comVal.token || localStorage.getItem('token')
+      //申请一个WebSocket对象，参数是服务端地址，同http协议使用http://开头一样，WebSocket协议的url使用ws://开头，另外安全的WebSocket协议使用wss://开头
+      this.wsInstance = new WebSocket(`wss://ws.ijolijoli.com?access_token=${token}`);
+      this.wsInstance.onopen = () => {
+        //当WebSocket创建成功时，触发onopen事件
+        console.log("连接成功");
+        this.timer = setInterval(() => {
+          this.wsInstance.send(JSON.stringify({type:'ping'}));
+        }, 30000);
+      }
+      this.wsInstance.onmessage = (e) => {
+        //当客户端收到服务端发来的消息时，触发onmessage事件，参数e.data包含server传递过来的数据
+        console.log('收到消息',e.data)
+        let data = JSON.parse(e.data);
+        console.log(data)
+      }
+      this.wsInstance.onclose = (e) => {
+        //当客户端收到服务端发送的关闭连接请求时，触发onclose事件
+        console.log("连接已关闭");
+      }
+      this.wsInstance.onerror = (e) => {
+        //如果出现连接、处理、接收、发送数据失败的时候触发onerror事件
+        console.log(e);
+      }
   },
   components: {
     leftMenu,
@@ -99,6 +130,10 @@ export default {
         'value': false
       })
       localStorage.removeItem('token');
+
+      // 关闭WebSocket连接并清除定时器
+      this.wsInstance.close()
+      clearInterval(this.timer)
       
       this.$router.replace('/login')
     },
@@ -205,6 +240,16 @@ export default {
       .news {
         width: 24px;
         height: 24px;
+        position: relative;
+        .dot {
+          width: 8px;
+          height: 8px;
+          border-radius: 50%;
+          background-color: #e54635;
+          position: absolute;
+          right: 2px;
+          top: 2px;
+        }
 
         img {
           width: 100%;