socket

src/App.vue

 <template>
   <div id="app">
     <router-view />
+    <audio controls="controls"  id="my_audio" src="./assets/audio/alarm.mp3" style="display:none;" hidden="hidden" />
+    <div class="tips" v-if="tflag">
+      <p>提示</p>
+      <span>有一条新告警</span>
+    </div>
   </div>
 </template>
 
 <script>
+import { receiveMessage } from '@/utils/websocket'
+import socket from '@/utils/websocket' 
+import { mapState } from 'vuex'
+import EventBus from '@/utils/bus'
+
 export default {
-  name: 'App'
+  name: 'App',
+  data() {
+    return  {
+      websocket: null,
+      tflag: false,
+    }
+  },
+  computed: {
+    ...mapState("user", ['userBaseInfo']),
+    userId() {
+      return this.userBaseInfo.userId
+    }
+  },
+  methods: {
+    receiveMessage,
+    closeWebsocket() {
+      if (this.websocket) {
+        this.websocket.close()
+      }
+    },
+  },
+  mounted() {
+    this.websocket = socket({
+      onmessage: this.receiveMessage
+    })
+    EventBus.$on('dialogAlarm', (data) => {
+      this.tflag = data
+      setTimeout(() => {
+        this.tflag = false
+      }, 3000)
+    })
+  },
+  watch: {
+    userId: {
+      immediate: true,
+      handler(newV) {
+        if (newV) {
+          this.closeWebsocket()
+          // my_audio.play()
+          this.websocket = socket({
+            onmessage: this.receiveMessage
+          })
+        }
+      }
+    }
+  },
+
 }
 </script>
 <style lang="scss" scoped>
-// zheyeshi
 #app {
   // & ::v-deep .el-table__body tr:hover>td{
   //   background-color: #bed5ff !important;
@@ -20,4 +75,16 @@ export default {
   //   background-color: #bed5ff !important;
   // }
 }
+.tips{
+  width: 400px;
+  height: 80px;
+  background: #fff;
+  box-shadow: 0px 2px 14px #888888;
+  border-radius: 5px;
+  padding: 0 20px 20px 20px;
+  position: absolute; 
+  text-align: center;
+ top:calc(50% - 40px);
+ left:calc(50% - 200px)
+}
 </style>

src/main.js

@@ -12,8 +12,8 @@ import '@/permission' // permission control
 import performLoader from '@/utils/global_main_loader.js'
 
    
- import WS from '@/utils/websocket'  
-   Vue.prototype.$ws = WS
+import WS from '@/utils/websocket'  
+Vue.prototype.$ws = WS
 Vue.use(ElementUI, { locale })
 performLoader(Vue) // 所有的第三方插件性质的东西都放到这里面了
 Vue.config.productionTip = false

src/store/modules/websocket.js

-const state ={
-    webSocketMsg: ''
-  }
- const mutations={
-    SET_WS_MSG(state, msg) {
-  state.webSocketMsg = msg
- 
-}
-}
-
-const getters = {
-  webSocketMsg(state) {
-      return state.webSocketMsg
-  }
-}
-export default {
-    namespaced: true,
-    state,
-    mutations,
-    getters
-  
-  }
\ No newline at end of file

src/utils/bus.js

+import Vue from 'vue'
+const EventBus = new Vue()
+export default EventBus
\ No newline at end of file

src/utils/websocket.js

-import store from '../store'
-const WS = {
-    $ws: null,
-    type:"",
-    // webscoket实例  
-    wsUrl: 'ws://8.142.143.40:8885/websocket/1',
-    // websocket链接地址       
-    createWS: function (val) {
-      this.type=val;
-      console.log(this.type);
-        if ('WebSocket' in window) {
-            this.$ws = new WebSocket(this.wsUrl)
-            this.$ws.onopen = this.wsOpen
-            this.$ws.onmessage = this.wsMessage
-            this.$ws.onerror = this.wsError
-            this.$ws.onclose = this.wsClose
-        } else {
-            alert('当前浏览器不支持webSocket')
-        }
-    },
-    wsOpen: function () {
-        this.send(WS.type)
-        console.log('== websocket open ==',"传值为" + WS.type)
-        heartBeat.start()
-    },
-    wsMessage: function (msg) {
-        // console.log( msg.data)
-       
-        heartBeat.reset()
-        store.commit('websocket/SET_WS_MSG', msg.data)
-    },
-     wsError: function (err) { 
-         console.log('== websocket error ==', err)
-         }, 
-         wsClose: function (event) {
-              console.log('== websocket close ==', event)
-             }
+/* eslint-disable */
+import { Message } from "element-ui"
+import EventBus from '@/utils/bus'
+
+export default function socket(handlerOptions) {
+  let {
+    onmessage,
+    onopen
+  } = handlerOptions
+  let socketUrl = 'ws://8.142.143.40:8885/websocket/1'
+  let websocket
+  if ("WebSocket" in window) {
+    websocket = new WebSocket(socketUrl)
+  } else {
+    Message.warning("当前浏览器不支持WebSocket推送，请升级浏览器")
+  }
+
+  let heart = heartCheck(websocket)
+
+  websocket.onerror = function() {
+    console.info("Websocket服务器连接错误")
+  }
+
+  window.onbeforeunload = function() {
+    websocket.close()
+  }
+
+  //连接成功建立的回调方法
+  websocket.onopen = function() {
+    console.info("Websocket连接成功")
+    heart.start()
+    onopen && onopen()
+  }
+
+  //接收到消息的回调方法
+  websocket.onmessage = function(event) {
+    let message = event.data //消息内容
+    heart.reset() //重置心跳上传时间
+    onmessage && onmessage(message) //消息业务处理
+  }
+
+  //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
+  window.onbeforeunload = function() {
+    websocket.close()
+  }
+  return websocket
 }
-const heartBeat = {
-    timeout: 30000, // 心跳重连时间  
-    timeoutObj: null, // 定时器  
-    reset: function () {
-        clearInterval(this.timeoutObj)
-        console.log('websocket 心跳')
-        heartBeat.start()
+
+function heartCheck(websocket) {
+  return {
+    timeout: 15000,
+    timeoutObj: null,
+    reset: function() {
+      clearTimeout(this.timeoutObj)
+      this.start()
+    },
+    start: function() {
+      this.timeoutObj = setInterval(function() {
+        websocket.send("HeartBeat")
+        console.info("Websocket发送心跳：HeartBeat")
+      }, this.timeout)
     },
-    start: function () {
-        this.timeoutObj = setTimeout(function () {
-            if (WS.$ws.readyState === 1) {
-                WS.$ws.send('HeartBeat')
-            }
-        }, this.timeout)
-    }
+  }
 }
-export default WS
+//消息处理
\ No newline at end of file
+export function receiveMessage(message) {
+    // 消息接收后处理逻辑 接口访问 
+    console.log(message, '接收到的信息');
+    EventBus.$emit('dialogAlarm', true)
+    // let obj = JSON.parse(message)
+    // return obj
+}
\ No newline at end of file

src/views/alarm/device/index.vue

@@ -125,13 +125,6 @@
       class="pagination"
       @pagination="handlePageChange"
     />
-     <audio controls="controls"  id="my_audio" src="../../../assets/audio/alarm.mp3" style="display:none;" hidden="hidden">
-        </audio>
-        <div class="tips" v-if="tflag==true">
-          <p>提示</p>
-          <span>有一条新告警</span>
-        </div>
-    
   </div>
 </template>
 
@@ -168,7 +161,6 @@ export default {
           key: 0,
         },
       ],
-      tflag:false,
       isQuery: false,
       searchOption: {},
     };
@@ -258,41 +250,11 @@ export default {
     },
   
   },
-  computed: {
-     
-    getWsMsg:{
-      get(){
-      return this.$store.state.websocket.webSocketMsg
-      },
-      set(){
-        // this.$store.state.websocket.webSocketMsg=a
-      }
-    },
-   
-  },
-  watch: {
-    getWsMsg: {
-      handler(newVal) { 
-      
-        this.getWsMsg=!!newVal
-        my_audio.play();
-        this.tflag=true
-    setTimeout(() => {
-      this.tflag=false
-    }, 3000);
-   
-        console.log(newVal);
-        
-        // alert("接收到webSocket推送" + newVal);
-      },
-    },
-  },
   mounted() {
     this.getTableData();
    
   },
   created(){
-   this.$ws.createWS("1")
   }
 };