feat: 消息提醒-建立WebSocket连接

src/App.vue

@@ -5,20 +5,69 @@
 </template>
 
 <script>
+import { mapMutations } from 'vuex'
 export default {
     data() {
         return {
-            list:[]
+            list:[],
+            timer: null,
+            wsInstance: null
         }
     },
+    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,7 @@
           {{$route.name}}
         </div>
         <div class="right">
-          <div class="news"><img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/news.png"></div>
+          <div @click="onAppMessage" class="news"><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"
@@ -41,11 +41,20 @@
         <router-view></router-view>
       </div>
     </div>
+    <minePupop :show="msgPupopVisible">
+      <div class="block">
+          <div class="delete-pupop" @click="msgPupopVisible=false">
+            <img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/delete.png" alt />
+          </div>
+      </div>
+    </minePupop>
   </div>
 </template>
 
 <script type="text/javascript">
+import { mapMutations } from 'vuex'
 import leftMenu from './leftMenu'
+import minePupop from "../../../components/minePupop/index.vue";
 import api from '@/server/home'
 
 
@@ -58,7 +67,8 @@ export default {
       isback: false,
       userInfo: {
         name: '333'
-      }
+      },
+      msgPupopVisible: false
     }
   },
   created () {
@@ -66,8 +76,10 @@ export default {
   },
   components: {
     leftMenu,
+    minePupop
   },
   methods: {
+    ...mapMutations(['SAVE_COMMON_VALUE']),
     getUserInfo () {
       let that = this
       api.getUserInfo().then(res => {
@@ -78,7 +90,16 @@ export default {
       })
     },
     loginOut () {
+      this.SAVE_COMMON_VALUE({
+        'key': 'token',
+        'value': null
+      })
+      this.SAVE_COMMON_VALUE({
+        'key': 'isLogin',
+        'value': false
+      })
       localStorage.removeItem('token');
+      
       this.$router.replace('/login')
     },
     changeMenu (index) {
@@ -89,6 +110,9 @@ export default {
     },
     goBack () {
       this.$router.back()
+    },
+    onAppMessage () {
+      this.msgPupopVisible = true
     }
   },
   computed: {
@@ -217,4 +241,23 @@ export default {
     background-color: #f7f8fa;
   }
 }
+.block {
+  width: 540px;
+  height: 550px;
+  background: #ffffff;
+  border-radius: 8px;
+  position: relative;
+  .delete-pupop {
+    position: absolute;
+    width: 32px;
+    height: 32px;
+    top: 5px;
+    right: 5px;
+    img {
+      width: 100%;
+      height: 100%;
+      display: block;
+    }
+  }
+}
 </style>

src/pages/login/login.vue

@@ -30,6 +30,7 @@
 </template>
 
 <script>
+import { mapMutations } from 'vuex'
 import api from '../../server/home'
 import axios from 'axios';
 // import Cookies from "js-cookie"
@@ -46,6 +47,7 @@ export default {
   watch: {},
 
   methods: {
+    ...mapMutations(['SAVE_COMMON_VALUE']),
     onLogin () {
       let params = {
         username: this.account,
@@ -54,6 +56,14 @@ export default {
       api.getToken(params).then(res => {
         if (res.code == 200) {
           localStorage.setItem("token", res.data.token)
+          this.SAVE_COMMON_VALUE({
+            'key': 'token',
+            'value': res.data.token
+          })
+          this.SAVE_COMMON_VALUE({
+            'key': 'isLogin',
+            'value': true
+          })
           axios.defaults.headers.token = res.data.token
           this.$router.push({
             path: '/home'

src/store/modules/comVal.js

@@ -1,6 +1,7 @@
 const state = {
   name: 666,
-  token: null
+  token: null,
+  isLogin: false
 }
 
 const actions = {