diff --git a/jero-web/src/components/tools/HeaderNotice.vue b/jero-web/src/components/tools/HeaderNotice.vue index b3b622211..eb17e3b15 100644 --- a/jero-web/src/components/tools/HeaderNotice.vue +++ b/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) + // } + // } + // } } } diff --git a/jero-web/src/main.js b/jero-web/src/main.js index ed0e649f6..2d3eb1817 100644 --- a/jero-web/src/main.js +++ b/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') diff --git a/jero-web/src/utils/socketVuex.js b/jero-web/src/utils/socketVuex.js new file mode 100644 index 000000000..41d0fae3b --- /dev/null +++ b/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) + } + } +}) \ No newline at end of file