修改已知问题

jero-web/src/components/tools/HeaderNotice.vue

@@ -77,9 +77,24 @@
         return parseInt(this.msg1Count)
       }
     },
+    watch: {
+      '$socketPublic.state.msg': {
+        //处理接收到的消息
+        handler: function(res) {
+          let that = this
+          let data = JSON.parse(res.data)
+          if (data.msgId) {
+            this.loadData()
+          }
+        }
+      }
+    },
     created() {
       this.loadData()
-      this.initWebSocket()
+      // this.initWebSocket()
+      if (store.getters.userInfo) {
+        this.$socketPublic.dispatch('webSocketInit')//初始化ws
+      }
     },
     mounted() {
       // this.loadData()
@@ -90,10 +105,10 @@
     beforeDestroy() {
 
     },
-    destroyed: function() { // 离开页面生命周期函数
-      this.websocketOnclose()
-      clearInterval(this.timer)
-    },
+    // destroyed: function() { // 离开页面生命周期函数
+    //   this.websocketOnclose()
+    //   clearInterval(this.timer)
+    // },
     methods: {
       loadData() {
         getAction(this.url.listCementByUser).then((res) => {
@@ -131,91 +146,91 @@
       },
       handleHoverChange(visible) {
         this.hovered = visible
-      },
-
-      initWebSocket: function() {
-        // WebSocket与普通的请求所用协议有所不同，ws等同于http，wss等同于https
-        var userId = store.getters.userInfo.id
-        var url = window._CONFIG['domianWebSocketURL'].replace('https://', 'wss://').replace('http://', 'ws://') + '/websocket/' + userId
-        this.websock = new WebSocket(url)
-        this.websock.onopen = this.websocketOnopen
-        this.websock.onerror = this.websocketOnerror
-        this.websock.onmessage = this.websocketOnmessage
-        this.websock.onclose = this.websocketOnclose
-      },
-      websocketOnopen: function() {
-        // 添加心跳检测，每10秒发一次数据，防止连接断开（这跟服务器的设置有关，如果服务器没有设置每隔多长时间不发消息断开，可以不进行心跳设置）
-        let self = this
-        this.timer = setInterval(() => {
-          try {
-            self.websock.send('test')
-            console.log('发送消息')
-          } catch (err) {
-            console.log('断开了：' + err)
-            self.connection()
-          }
-        }, 5000)
-      },
-      websocketOnerror: function(e) {
-        console.log('WebSocket连接发生错误')
-        this.reconnect()
-      },
-      websocketOnmessage: function(e) {
-        if (e.data != 'test') {
-          this.loadData()
-        }
-        //系统通知
-      },
-      websocketOnclose: function(e) {
-        console.log(e)
-        this.websock.close()
-      },
-      websocketSend(text) { // 数据发送
-        console.log(text)
-        try {
-          this.websock.send(text)
-        } catch (err) {
-          console.log('send failed (' + err.code + ')')
-        }
-      },
-
-      reconnect() {
-        var that = this
-        if (that.lockReconnect) return
-        that.lockReconnect = true
-        //没连接上会一直重连，设置延迟避免请求过多
-        setTimeout(function() {
-          that.initWebSocket()
-          that.lockReconnect = false
-        }, 5000)
-      },
-      heartCheckFun() {
-        var that = this
-        //心跳检测,每20s心跳一次
-        console.log(123)
-        that.heartCheck = {
-          timeout: 20000,
-          timeoutObj: null,
-          serverTimeoutObj: null,
-          reset: function() {
-            clearTimeout(this.timeoutObj)
-            //clearTimeout(this.serverTimeoutObj);
-            return this
-          },
-          start: function() {
-            var self = this
-            this.timeoutObj = setTimeout(function() {
-              //这里发送一个心跳，后端收到后，返回一个心跳消息，
-              //onmessage拿到返回的心跳就说明连接正常
-              that.websocketSend('HeartBeat')
-              console.info('客户端发送心跳')
-              //self.serverTimeoutObj = setTimeout(function(){//如果超过一定时间还没重置，说明后端主动断开了
-              //  that.websock.close();//如果onclose会执行reconnect，我们执行ws.close()就行了.如果直接执行reconnect 会触发onclose导致重连两次
-              //}, self.timeout)
-            }, this.timeout)
-          }
-        }
       }
+
+      // initWebSocket: function() {
+      //   // WebSocket与普通的请求所用协议有所不同，ws等同于http，wss等同于https
+      //   var userId = store.getters.userInfo.id
+      //   var url = window._CONFIG['domianWebSocketURL'].replace('https://', 'wss://').replace('http://', 'ws://') + '/websocket/' + userId
+      //   this.websock = new WebSocket(url)
+      //   this.websock.onopen = this.websocketOnopen
+      //   this.websock.onerror = this.websocketOnerror
+      //   this.websock.onmessage = this.websocketOnmessage
+      //   this.websock.onclose = this.websocketOnclose
+      // },
+      // websocketOnopen: function() {
+      //   // 添加心跳检测，每10秒发一次数据，防止连接断开（这跟服务器的设置有关，如果服务器没有设置每隔多长时间不发消息断开，可以不进行心跳设置）
+      //   let self = this
+      //   this.timer = setInterval(() => {
+      //     try {
+      //       self.websock.send('test')
+      //       console.log('发送消息')
+      //     } catch (err) {
+      //       console.log('断开了：' + err)
+      //       self.connection()
+      //     }
+      //   }, 5000)
+      // },
+      // websocketOnerror: function(e) {
+      //   console.log('WebSocket连接发生错误')
+      //   this.reconnect()
+      // },
+      // websocketOnmessage: function(e) {
+      //   if (e.data != 'test') {
+      //     this.loadData()
+      //   }
+      //   //系统通知
+      // },
+      // websocketOnclose: function(e) {
+      //   console.log(e)
+      //   this.websock.close()
+      // },
+      // websocketSend(text) { // 数据发送
+      //   console.log(text)
+      //   try {
+      //     this.websock.send(text)
+      //   } catch (err) {
+      //     console.log('send failed (' + err.code + ')')
+      //   }
+      // },
+      //
+      // reconnect() {
+      //   var that = this
+      //   if (that.lockReconnect) return
+      //   that.lockReconnect = true
+      //   //没连接上会一直重连，设置延迟避免请求过多
+      //   setTimeout(function() {
+      //     that.initWebSocket()
+      //     that.lockReconnect = false
+      //   }, 5000)
+      // },
+      // heartCheckFun() {
+      //   var that = this
+      //   //心跳检测,每20s心跳一次
+      //   console.log(123)
+      //   that.heartCheck = {
+      //     timeout: 20000,
+      //     timeoutObj: null,
+      //     serverTimeoutObj: null,
+      //     reset: function() {
+      //       clearTimeout(this.timeoutObj)
+      //       //clearTimeout(this.serverTimeoutObj);
+      //       return this
+      //     },
+      //     start: function() {
+      //       var self = this
+      //       this.timeoutObj = setTimeout(function() {
+      //         //这里发送一个心跳，后端收到后，返回一个心跳消息，
+      //         //onmessage拿到返回的心跳就说明连接正常
+      //         that.websocketSend('HeartBeat')
+      //         console.info('客户端发送心跳')
+      //         //self.serverTimeoutObj = setTimeout(function(){//如果超过一定时间还没重置，说明后端主动断开了
+      //         //  that.websock.close();//如果onclose会执行reconnect，我们执行ws.close()就行了.如果直接执行reconnect 会触发onclose导致重连两次
+      //         //}, self.timeout)
+      //       }, this.timeout)
+      //     }
+      //   }
+      // }
     }
   }
 </script>

jero-web/src/main.js

@@ -10,17 +10,19 @@ import store from './store/'
 import $ from 'jquery'
 import {
   VueAxios
-} from "@/utils/request"
+} from '@/utils/request'
 import watermark from '@/assets/watermark.js'
+
 Vue.prototype.$watermark = watermark
 require('@/components/onlineForm/onlineForm')
 require('@/components/onlineForm/OnlineForm.css')
 
 import Antd, { version } from 'ant-design-vue'
+
 console.log('ant-design-vue version:', version)
 
 import Viser from 'viser-vue'
-import 'ant-design-vue/dist/antd.less'; // or 'ant-design-vue/dist/antd.less'
+import 'ant-design-vue/dist/antd.less' // or 'ant-design-vue/dist/antd.less'
 
 import VueI18n from 'vue-i18n'
 import LangENUS from './common/lang/en-us'
@@ -45,12 +47,16 @@ import {
   DEFAULT_FIXED_SIDEMENU,
   DEFAULT_CONTENT_WIDTH_TYPE,
   DEFAULT_MULTI_PAGE
-} from "@/store/mutation-types"
+} from '@/store/mutation-types'
 import config from '@/defaultSettings'
+//引入
+import socketPublic from '@/utils/socketVuex.js'
 
+//挂载
+Vue.prototype.$socketPublic = socketPublic
 import JDictSelectTag from './components/dict/index.js'
 import hasPermission from '@/utils/hasPermission'
-import vueBus from '@/utils/vueBus';
+import vueBus from '@/utils/vueBus'
 import JeroComponents from '@/components/jero/index'
 import '@/assets/less/JAreaLinkage.less'
 import VueAreaLinkage from 'vue-area-linkage'
@@ -58,6 +64,7 @@ import '@/components/jero/JVxeTable/install'
 import '@/components/JVxeCells/install'
 // 挂载全局使用的方法
 import VueDraggableResizable from 'vue-draggable-resizable'
+
 Vue.component('vue-draggable-resizable', VueDraggableResizable)
 Vue.config.productionTip = false
 Vue.use(Storage, config.storageOptions)
@@ -68,21 +75,22 @@ Vue.use(hasPermission)
 Vue.use(JDictSelectTag)
 Vue.use(Print)
 Vue.use(preview)
-Vue.use(vueBus);
-Vue.use(JeroComponents);
-Vue.use(VueAreaLinkage);
+Vue.use(vueBus)
+Vue.use(JeroComponents)
+Vue.use(VueAreaLinkage)
 Vue.use(VueI18n)
 // 图片放大缩小插件
 import Viewer from 'v-viewer'
 import 'viewerjs/dist/viewer.css'
-Vue.use(Viewer,{
-  defaultOptions:{
-    zIndex:999999
+
+Vue.use(Viewer, {
+  defaultOptions: {
+    zIndex: 999999
   }
-});
+})
 Viewer.setDefaults({
-  Options: { "inline": true, "button": true ,'zIndex': 9999, 'zIndexInline': 9999}
-});
+  Options: { 'inline': true, 'button': true, 'zIndex': 9999, 'zIndexInline': 9999 }
+})
 const i18n = new VueI18n({
   locale: 'zh-cn',
   messages: {
@@ -114,7 +122,7 @@ function main() {
       store.commit('SET_MULTI_PAGE', Vue.ls.get(DEFAULT_MULTI_PAGE, config.multipage))
     },
     render: h => h(App),
-    data:{
+    data: {
       Bus: new Vue()
     }
   }).$mount('#app')

jero-web/src/utils/socketVuex.js

@@ -0,0 +1,120 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+import store from '@/store/'
+
+Vue.use(Vuex)
+// console.log(window._CONFIG['domianWebSocketURL'])
+
+export default new Vuex.Store({
+  state: {
+    ws: null, //建立的连接
+    lockReconnect: false, //是否真正建立连接
+    timeout: 15000, //15秒一次心跳
+    timeoutObj: null, //心跳心跳倒计时
+    serverTimeoutObj: null, //心跳倒计时
+    timeoutnum: null, //断开 重连倒计时
+    msg: null //接收到的信息
+
+  },
+  getters: {
+    // 获取接收的信息
+    socketMsgs: state => {
+      return state.msg
+    }
+  },
+  mutations: {
+    //初始化ws 用户登录后调用
+    webSocketInit(state) {
+      let that = this
+      //this 创建一个state.ws对象【发送、接收、关闭socket都由这个对象操作】
+      const userId = store.getters.userInfo.id
+      state.ws = new WebSocket(window._CONFIG['domianWebSocketURL'].replace('https://', 'wss://').replace('http://', 'ws://') + '/websocket/' + userId)
+      state.ws.onopen = function(res) {
+        console.log('Connection success...')
+        /**
+         * 启动心跳检测
+         */
+        that.commit('start')
+      }
+      state.ws.onmessage = function(res) {
+        console.log(res)
+        if (res.data === 'heartCheck') {
+          // 收到服务器信息，心跳重置
+          that.commit('reset')
+          console.log('socket-heartCheck')
+        } else {
+          state.msg = res
+        }
+      }
+      state.ws.onclose = function(res) {
+        console.log('Connection closed...')
+        //重连
+        that.commit('reconnect')
+      }
+      state.ws.onerror = function(res) {
+        console.log('Connection error...')
+        //重连
+        that.commit('reconnect')
+      }
+    },
+    reconnect(state) {
+      //重新连接
+      let that = this
+      if (state.lockReconnect) {
+        return
+      }
+      state.lockReconnect = true
+      //没连接上会一直重连,30秒重试请求重连，设置延迟避免请求过多
+      state.timeoutnum &&
+      clearTimeout(state.timeoutnum)
+      state.timeoutnum = setTimeout(() => {
+        //新连接
+        that.commit('webSocketInit')
+        state.lockReconnect = false
+      }, 5000)
+    },
+    reset(state) {
+      //重置心跳
+      let that = this
+      //清除时间
+      clearTimeout(state.timeoutObj)
+      clearTimeout(state.serverTimeoutObj)
+      //重启心跳
+      that.commit('start')
+    },
+    start(state) {
+      //开启心跳
+      var self = this
+      state.timeoutObj &&
+      clearTimeout(state.timeoutObj)
+      state.serverTimeoutObj &&
+      clearTimeout(state.serverTimeoutObj)
+      state.timeoutObj = setTimeout(() => {
+        //这里发送一个心跳，后端收到后，返回一个心跳消息，
+        if (state.ws.readyState === 1) {
+          //如果连接正常
+          state.ws.send('heartCheck')
+        } else {
+          //否则重连
+          self.commit('reconnect')
+        }
+        state.serverTimeoutObj = setTimeout(function() {
+          //超时关闭
+          state.ws.close()
+        }, state.timeout)
+      }, state.timeout)
+    }
+  },
+  actions: {
+    webSocketInit({
+                    commit
+                  }, url) {
+      commit('webSocketInit', url)
+    },
+    webSocketSend({
+                    commit
+                  }, p) {
+      commit('webSocketSend', p)
+    }
+  }
+})