diff --git a/src/store/index.js b/src/store/index.js index c7e23ff..8bff46c 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -4,6 +4,7 @@ import user from './modules/user' import permission from './modules/permission' import tagsView from './modules/tagsView' +import websocket from './modules/websocket' import getters from './getters' Vue.use(Vuex) @@ -13,6 +14,7 @@ app, user, permission, + websocket, tagsView }, getters diff --git a/src/store/index.js b/src/store/index.js index c7e23ff..8bff46c 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -4,6 +4,7 @@ import user from './modules/user' import permission from './modules/permission' import tagsView from './modules/tagsView' +import websocket from './modules/websocket' import getters from './getters' Vue.use(Vuex) @@ -13,6 +14,7 @@ app, user, permission, + websocket, tagsView }, getters diff --git a/src/store/modules/websocket.js b/src/store/modules/websocket.js new file mode 100755 index 0000000..f85acdc --- /dev/null +++ b/src/store/modules/websocket.js @@ -0,0 +1,108 @@ +import { Notification } from 'element-ui' +import router from '../../router' +import user from './user' +const websocket = { + state: { + // wsUrl: 'ws://198.168.1.113:11307/websocket/', + wsUrl: 'ws://127.0.0.1:8095/websocket/', + websocket: null, + wsStatus: false, // websocket连接状态 + needRefresh: false // 是否需要刷新数据 + }, + mutations: { + SET_WEBSOCKET: (state, websocket) => { + state.websocket = websocket + }, + SET_WS_STATUS: (state, wsStatus) => { + state.wsStatus = wsStatus + }, + SET_NEED_REFRESH: (state, needRefresh) => { + state.needRefresh = needRefresh + } + }, + + actions: { + // 连接websocket + initWebSocket({ commit }) { + if (typeof (WebSocket) === 'undefined') { + Notification({ + title: '提示', + message: '当前浏览器无法接收实时报警信息，请使用谷歌浏览器或360浏览器极速模式！', + type: 'warning', + duration: 0 + }) + } else { + // 获取token保存到vuex中的用户信息，此处仅适用于本项目，注意删除或修改 + // 实例化socket，这里我把用户名传给了后台，使后台能判断要把消息发给哪个用户，其实也可以后台直接获取用户IP来判断并推送 + const socketUrl = websocket.state.wsUrl + user.state.token + console.log(socketUrl) + const socket = new WebSocket(socketUrl) + commit('SET_WEBSOCKET', socket) + commit('SET_WS_STATUS', true) + // 监听socket打开 + socket.onopen = function() { + console.log('浏览器WebSocket已打开') + } + // 监听socket消息接收 + socket.onmessage = function(msg) { + // 设备更新数据结果 + const data = msg.data + console.log(data) + if(data.indexOf('成功')!== -1){ + Notification({ + title: '设备数据更新结果', + message: data, + type: 'success', + duration: 0 + }) + }else{ + Notification({ + title: '设备数据更新结果', + message: data, + type: 'error', + duration: 0 + }) + } + + // // 转换为json对象 + // const data = JSON.parse(msg.data) + // console.log(data) + // if (data.type === 'alarm') { + // commit('SET_NEED_REFRESH', true) + // Notification({ + // title: '新报警来了', + // // 这里也可以把返回信息加入到message中显示 + // message: data.message, + // type: 'warning', + // onClick: () => { + // router.push({ + // path: '/overview', + // query: { refresh: true } + // }) + // } + // }) + // setTimeout(function() { + // commit('SET_NEED_REFRESH', false) + // }, 2000) + // } + } + // 监听socket错误 + socket.onerror = function() { + Notification({ + title: '服务器错误', + message: '无法接收实时报警信息,请检查服务器后重新刷新页面', + type: 'error', + duration: 0 + }) + } + // 监听socket关闭 + socket.onclose = function() { + console.log('WebSocket已关闭') + commit('SET_WS_STATUS', false) + } + } + } + } +} + +export default websocket diff --git a/src/store/index.js b/src/store/index.js index c7e23ff..8bff46c 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -4,6 +4,7 @@ import user from './modules/user' import permission from './modules/permission' import tagsView from './modules/tagsView' +import websocket from './modules/websocket' import getters from './getters' Vue.use(Vuex) @@ -13,6 +14,7 @@ app, user, permission, + websocket, tagsView }, getters diff --git a/src/store/modules/websocket.js b/src/store/modules/websocket.js new file mode 100755 index 0000000..f85acdc --- /dev/null +++ b/src/store/modules/websocket.js @@ -0,0 +1,108 @@ +import { Notification } from 'element-ui' +import router from '../../router' +import user from './user' +const websocket = { + state: { + // wsUrl: 'ws://198.168.1.113:11307/websocket/', + wsUrl: 'ws://127.0.0.1:8095/websocket/', + websocket: null, + wsStatus: false, // websocket连接状态 + needRefresh: false // 是否需要刷新数据 + }, + mutations: { + SET_WEBSOCKET: (state, websocket) => { + state.websocket = websocket + }, + SET_WS_STATUS: (state, wsStatus) => { + state.wsStatus = wsStatus + }, + SET_NEED_REFRESH: (state, needRefresh) => { + state.needRefresh = needRefresh + } + }, + + actions: { + // 连接websocket + initWebSocket({ commit }) { + if (typeof (WebSocket) === 'undefined') { + Notification({ + title: '提示', + message: '当前浏览器无法接收实时报警信息，请使用谷歌浏览器或360浏览器极速模式！', + type: 'warning', + duration: 0 + }) + } else { + // 获取token保存到vuex中的用户信息，此处仅适用于本项目，注意删除或修改 + // 实例化socket，这里我把用户名传给了后台，使后台能判断要把消息发给哪个用户，其实也可以后台直接获取用户IP来判断并推送 + const socketUrl = websocket.state.wsUrl + user.state.token + console.log(socketUrl) + const socket = new WebSocket(socketUrl) + commit('SET_WEBSOCKET', socket) + commit('SET_WS_STATUS', true) + // 监听socket打开 + socket.onopen = function() { + console.log('浏览器WebSocket已打开') + } + // 监听socket消息接收 + socket.onmessage = function(msg) { + // 设备更新数据结果 + const data = msg.data + console.log(data) + if(data.indexOf('成功')!== -1){ + Notification({ + title: '设备数据更新结果', + message: data, + type: 'success', + duration: 0 + }) + }else{ + Notification({ + title: '设备数据更新结果', + message: data, + type: 'error', + duration: 0 + }) + } + + // // 转换为json对象 + // const data = JSON.parse(msg.data) + // console.log(data) + // if (data.type === 'alarm') { + // commit('SET_NEED_REFRESH', true) + // Notification({ + // title: '新报警来了', + // // 这里也可以把返回信息加入到message中显示 + // message: data.message, + // type: 'warning', + // onClick: () => { + // router.push({ + // path: '/overview', + // query: { refresh: true } + // }) + // } + // }) + // setTimeout(function() { + // commit('SET_NEED_REFRESH', false) + // }, 2000) + // } + } + // 监听socket错误 + socket.onerror = function() { + Notification({ + title: '服务器错误', + message: '无法接收实时报警信息,请检查服务器后重新刷新页面', + type: 'error', + duration: 0 + }) + } + // 监听socket关闭 + socket.onclose = function() { + console.log('WebSocket已关闭') + commit('SET_WS_STATUS', false) + } + } + } + } +} + +export default websocket diff --git a/src/views/deviceManage/listDevice.vue b/src/views/deviceManage/listDevice.vue index 42d75ea..d3df5a0 100644 --- a/src/views/deviceManage/listDevice.vue +++ b/src/views/deviceManage/listDevice.vue @@ -127,8 +127,15 @@ this.listQuery.devType = this.$route.query.devType // 接收路由参数 } this.fetchData()// 获取数据 + this.websocket() }, methods: { + websocket(){ + console.log(this.$store.state) + if(!this.$store.state.websocket.wsStatus){ + this.$store.dispatch('initWebSocket') + } + }, // 检查选择情况 checkSelection() { if (this.multipleSelection.length === 0) { @@ -195,7 +202,7 @@ ).then(() => { updateDB(deviceIds).then(response => { if (response.code === 200) { - this.$message.success('下发成功') + this.$message.success('下发更新指令成功，等待设备更新数据') this.fetchData() } })