Преглед изворни кода

optimize: WebSocket连接移入layout组件中

double пре 2 година
родитељ
комит
9b963ea038
2 измењених фајлова са 49 додато и 54 уклоњено
  1. 2 52
      src/App.vue
  2. 47 2
      src/components/common/layout/layout.vue

+ 2 - 52
src/App.vue

@@ -5,69 +5,19 @@
5 5
 </template>
6 6
 
7 7
 <script>
8
-import { mapMutations } from 'vuex'
9 8
 export default {
10 9
     data() {
11 10
         return {
12
-            list:[],
13
-            timer: null,
14
-            wsInstance: null
11
+            list:[]
15 12
         }
16 13
     },
17
-    computed: {
18
-        isLogin () {
19
-            return this.$store.state.comVal.isLogin
20
-        } 
21
-    },
22 14
     mounted: function () {
23 15
         
24 16
     },
25 17
     created: function () {
26
-        let token = this.$store.state.comVal.token || localStorage.getItem('token')
27
-        if (token) {
28
-            this.SAVE_COMMON_VALUE({
29
-                'key': 'isLogin',
30
-                'value': true
31
-            })
32
-        }
18
+
33 19
     },
34 20
     methods: {
35
-        ...mapMutations(['SAVE_COMMON_VALUE']),
36
-    },
37
-    watch: {
38
-        isLogin (newVal, oldVal) {
39
-            // console.log('newVal, oldVal: ', newVal, oldVal);
40
-            if (newVal) {
41
-                let token = this.$store.state.comVal.token || localStorage.getItem('token')
42
-                //申请一个WebSocket对象,参数是服务端地址,同http协议使用http://开头一样,WebSocket协议的url使用ws://开头,另外安全的WebSocket协议使用wss://开头
43
-                this.wsInstance = new WebSocket(`wss://ws.ijolijoli.com?access_token=${token}`);
44
-                this.wsInstance.onopen = () => {
45
-                    //当WebSocket创建成功时,触发onopen事件
46
-                    console.log("连接成功");
47
-                    this.timer = setInterval(() => {
48
-                        this.wsInstance.send(JSON.stringify({type:'ping'}));
49
-                    }, 30000);
50
-                }
51
-                this.wsInstance.onmessage = (e) => {
52
-                    //当客户端收到服务端发来的消息时,触发onmessage事件,参数e.data包含server传递过来的数据
53
-                    console.log('收到消息',e.data)
54
-                    let data = JSON.parse(e.data);
55
-                    console.log(data)
56
-                }
57
-                this.wsInstance.onclose = (e) => {
58
-                    //当客户端收到服务端发送的关闭连接请求时,触发onclose事件
59
-                    console.log("连接已关闭");
60
-                }
61
-                this.wsInstance.onerror = (e) => {
62
-                    //如果出现连接、处理、接收、发送数据失败的时候触发onerror事件
63
-                    console.log(e);
64
-                }
65
-            } else {
66
-                // console.log('清除定时器并关闭连接-不再send心跳ping')
67
-                this.wsInstance.close()
68
-                clearInterval(this.timer)
69
-            }
70
-        }
71 21
     }
72 22
 }
73 23
 </script>

+ 47 - 2
src/components/common/layout/layout.vue

@@ -22,7 +22,10 @@
22 22
           {{$route.name}}
23 23
         </div>
24 24
         <div class="right">
25
-          <div @click="onAppMessage" class="news"><img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/news.png"></div>
25
+          <div @click="onAppMessage" class="news">
26
+            <span class="dot"></span>
27
+            <img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/news.png" />
28
+          </div>
26 29
           <div class="head-img"><img :src="userInfo.avatar_url"></div>
27 30
           <el-dropdown trigger="click"
28 31
                        placement="top"
@@ -68,11 +71,39 @@ export default {
68 71
       userInfo: {
69 72
         name: '333'
70 73
       },
71
-      msgPupopVisible: false
74
+      msgPupopVisible: false,
75
+      timer: null,
76
+      wsInstance: null
72 77
     }
73 78
   },
74 79
   created () {
75 80
     this.getUserInfo()
81
+
82
+      console.log('开始连接...')
83
+      let token = this.$store.state.comVal.token || localStorage.getItem('token')
84
+      //申请一个WebSocket对象,参数是服务端地址,同http协议使用http://开头一样,WebSocket协议的url使用ws://开头,另外安全的WebSocket协议使用wss://开头
85
+      this.wsInstance = new WebSocket(`wss://ws.ijolijoli.com?access_token=${token}`);
86
+      this.wsInstance.onopen = () => {
87
+        //当WebSocket创建成功时,触发onopen事件
88
+        console.log("连接成功");
89
+        this.timer = setInterval(() => {
90
+          this.wsInstance.send(JSON.stringify({type:'ping'}));
91
+        }, 30000);
92
+      }
93
+      this.wsInstance.onmessage = (e) => {
94
+        //当客户端收到服务端发来的消息时,触发onmessage事件,参数e.data包含server传递过来的数据
95
+        console.log('收到消息',e.data)
96
+        let data = JSON.parse(e.data);
97
+        console.log(data)
98
+      }
99
+      this.wsInstance.onclose = (e) => {
100
+        //当客户端收到服务端发送的关闭连接请求时,触发onclose事件
101
+        console.log("连接已关闭");
102
+      }
103
+      this.wsInstance.onerror = (e) => {
104
+        //如果出现连接、处理、接收、发送数据失败的时候触发onerror事件
105
+        console.log(e);
106
+      }
76 107
   },
77 108
   components: {
78 109
     leftMenu,
@@ -99,6 +130,10 @@ export default {
99 130
         'value': false
100 131
       })
101 132
       localStorage.removeItem('token');
133
+
134
+      // 关闭WebSocket连接并清除定时器
135
+      this.wsInstance.close()
136
+      clearInterval(this.timer)
102 137
       
103 138
       this.$router.replace('/login')
104 139
     },
@@ -205,6 +240,16 @@ export default {
205 240
       .news {
206 241
         width: 24px;
207 242
         height: 24px;
243
+        position: relative;
244
+        .dot {
245
+          width: 8px;
246
+          height: 8px;
247
+          border-radius: 50%;
248
+          background-color: #e54635;
249
+          position: absolute;
250
+          right: 2px;
251
+          top: 2px;
252
+        }
208 253
 
209 254
         img {
210 255
           width: 100%;