1.websocket

src/components/main.vue

@@ -588,6 +588,14 @@ export default {
             }
         };
         return {
+            websocket: '',
+            userInfo: {}, // 用户信息
+            qrRole: [], //角色信息
+            roleList: {
+                obj: {},
+                arr: []
+            }, // 角色信息
+            userRoles: [],
             leaveFlag: true,
             PEButShow: false,
             PEhandleDownloadExcelForElTable,
@@ -749,6 +757,7 @@ export default {
             window.top.removeEventListener('unload', e => this.unloadHandler(e))
             window.top.removeEventListener('onunload', e => this.onunloadHandler(e))
         }
+        this.websocketclose();
     },
     mounted () {
         //  取字典
@@ -760,6 +769,7 @@ export default {
             this.minHeight = 'width: 100%;height: calc(100% - 10px);border: 0px;min-height: ' + ($('#menuTabId').height() - 113) + 'px'
             this.leaveFlag = false;
         });
+        this.getRoles();
     },
     methods: {
         logoutAwait: async function(){
@@ -940,6 +950,16 @@ export default {
                 window.top.addEventListener('beforeunload', e => that.beforeunloadHandler(e))
                 window.top.addEventListener('unload', e => that.unloadHandler(e))
                 window.top.addEventListener('onunload', e => that.onunloadHandler(e))
+                // websocket初始化
+                let token = getCookie('accessToken');
+                // WebSocket
+                      if ('WebSocket' in window) {
+                        // this.websocket = new WebSocket('ws://localhost:8086/websocket/123?token=' + token,[token])
+                        this.websocket = new WebSocket('ws://localhost:8086/websocket/' + token);
+                        this.initWebSocket()
+                      } else {
+                        alert('当前浏览器 Not support websocket')
+                      }
             }
 
             if (routerFlag > 0 || routerFlagP > 0) {
@@ -1232,7 +1252,118 @@ export default {
         updataUserInfo (data) {
             this.getUserInfo();
             this.$store.commit('userInfo', data)
-        }
+        },
+        initWebSocket () {
+                // 连接错误
+                this.websocket.onerror = this.setErrorMessage
+        
+                // 连接成功
+                this.websocket.onopen = this.setOnopenMessage
+        
+                // 收到消息的回调
+                this.websocket.onmessage = this.setOnmessageMessage
+        
+                // 连接关闭的回调
+                this.websocket.onclose = this.setOncloseMessage
+        
+                // 监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
+                window.onbeforeunload = this.onbeforeunload
+              },
+              setErrorMessage () {
+                console.log('WebSocket连接发生错误   状态码：' + this.websocket.readyState)
+              },
+              setOnopenMessage () {
+                console.log('WebSocket连接成功    状态码：' + this.websocket.readyState)
+              },
+              setOnmessageMessage (event) {
+                // 根据服务器推送的消息做自己的业务处理
+                let data = JSON.parse(event.data);
+                let show = false;
+                for(let item of data.role) {
+                  let roleId = this.roleList.obj[item].id;
+                  if(this.qrRole.includes(roleId)) {
+                    show = true;
+                    break;
+                  }
+                }
+                if(show) {
+                this.$notify({
+                          title: data.title,
+                          message: data.message,
+                          position: 'bottom-right',
+                          duration: 0
+                        });
+                // let audio = new Audio()
+                // audio.src = '/static/img/14430.wav';
+                // // 开启自动播放
+                //     // this.audio.autoplay = true;
+                // audio.play();
+                this.handleSpeak(data.tips);
+                console.log('服务端返回：' + event.data);
+                console.log( document.visibilityState );
+                console.log( document.hidden);
+                if (document.visibilityState != 'visible' || document.hidden) {
+                  let myWindow = window.open('','','width=200,height=100,left=800,top=500');
+                  // let myWindow = window.open(location.href,'_parent','');
+                   myWindow.document.write('<p>'+data.message+'</p>');
+                   myWindow.focus();
+                }
+                }
+              },
+              setOncloseMessage () {
+                console.log('WebSocket连接关闭    状态码：' + this.websocket.readyState)
+              },
+              onbeforeunload () {
+                this.closeWebSocket()
+              },
+              closeWebSocket () {
+                this.websocket.close()
+              },
+              // 语音播报的函数
+               handleSpeak(text='你好啊!'){
+                   if(window.speechSynthesis){
+                       const synth = window.speechSynthesis;
+                       const msg = new SpeechSynthesisUtterance();
+                       msg.text = text;     // 文字内容
+                       msg.lang = "zh-CN";  // 使用的语言:中文
+                       msg.volume = 20;      // 声音音量：1
+                       msg.rate = 1;        // 语速：1
+                       msg.pitch = 1;       // 音高：1
+                       msg.voice = this.getWindowVoice()  // 使用本地服务合成语音(若是获取不到 请异步获取, 加一个setTimeout)
+                       synth.speak(msg);    // 播放
+                   }
+               },
+              getWindowVoice(){  // 获取浏览器中语音 (中文 + 本地服务)
+                 return window.speechSynthesis.getVoices().find(item => item.localService && item.lang === 'zh-CN')
+              },
+              getRoles () {
+                  let that = this;
+                  // 获取用户信息
+                  this.store.dispatch('getUserInfo').then((res) => {
+                      that.axios.get('pass/v1/sysuserroles/?userId=' + res.data.userId + '&pageNum=1&pageSize=100').then(rest => {
+                        if (rest) {
+                          for (let i = 0; i < rest.data.list.length; i++) {
+                            that.qrRole.push(rest.data.list[i].roleId)
+                          }
+                          that.userRoles = rest.data.list; // 获取用户角色关联信息
+                        }
+                      })
+                  });
+                  // 获取角色信息
+                  this.store.dispatch('system/rolesManage/list').then(res => {
+                    if (res.code === '0') {
+                      this.roleList.arr = res.data;
+                      for (let obj of res.data) {
+                          this.roleList.obj[obj.roleName] = {
+                              name: obj.roleName,
+                              id: obj.id
+                          };
+                      }
+                      } else {
+                    this.$message.error(res.message);
+                  }
+                  });
+              }
     }
 }
 </script>