src/App.vue

@@ -15,10 +15,9 @@ export default {
         
     },
     created: function () {
-        
+
     },
     methods: {
-        
     }
 }
 </script>

src/components/common/layout/layout.vue

@@ -22,7 +22,10 @@
           {{$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">
+            <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"
@@ -41,11 +44,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,16 +70,47 @@ export default {
       isback: false,
       userInfo: {
         name: '333'
-      }
+      },
+      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,
+    minePupop
   },
   methods: {
+    ...mapMutations(['SAVE_COMMON_VALUE']),
     getUserInfo () {
       let that = this
       api.getUserInfo().then(res => {
@@ -78,7 +121,20 @@ export default {
       })
     },
     loginOut () {
+      this.SAVE_COMMON_VALUE({
+        'key': 'token',
+        'value': null
+      })
+      this.SAVE_COMMON_VALUE({
+        'key': 'isLogin',
+        'value': false
+      })
       localStorage.removeItem('token');
+
+      // 关闭WebSocket连接并清除定时器
+      this.wsInstance.close()
+      clearInterval(this.timer)
+      
       this.$router.replace('/login')
     },
     changeMenu (index) {
@@ -89,6 +145,9 @@ export default {
     },
     goBack () {
       this.$router.back()
+    },
+    onAppMessage () {
+      this.msgPupopVisible = true
     }
   },
   computed: {
@@ -181,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%;
@@ -217,4 +286,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 = {