|
|
@ -1,5 +1,5 @@ |
|
|
<template> |
|
|
<template> |
|
|
<div id="app"> |
|
|
<div id="app" @mousemove="moveEvent" @click="moveEvent"> |
|
|
<router-view /> |
|
|
<router-view /> |
|
|
</div> |
|
|
</div> |
|
|
</template> |
|
|
</template> |
|
|
@ -7,64 +7,30 @@ |
|
|
<script> |
|
|
<script> |
|
|
export default { |
|
|
export default { |
|
|
name: 'App', |
|
|
name: 'App', |
|
|
created() { |
|
|
data() { |
|
|
this.webSocket() // token过期提示 |
|
|
return { |
|
|
|
|
|
timmer: null |
|
|
|
|
|
} |
|
|
}, |
|
|
}, |
|
|
methods: { |
|
|
methods: { |
|
|
webSocket() { |
|
|
moveEvent: function() { |
|
|
const that = this |
|
|
const path = ['/login'] |
|
|
if (typeof (WebSocket) === 'undefined') { |
|
|
if (!path.includes(this.$route.path)) { |
|
|
this.$notify({ |
|
|
clearTimeout(this.timmer) |
|
|
title: '提示', |
|
|
this.init() |
|
|
message: '当前浏览器无法接收实时报警信息，请使用谷歌浏览器！', |
|
|
|
|
|
type: 'warning', |
|
|
|
|
|
duration: 0 |
|
|
|
|
|
}) |
|
|
|
|
|
} else { |
|
|
|
|
|
const id = 'exp-token' |
|
|
|
|
|
// 获取token保存到vuex中的用户信息，此处仅适用于本项目，注意删除或修改 |
|
|
|
|
|
// 实例化socket，这里我把用户名传给了后台，使后台能判断要把消息发给哪个用户，其实也可以后台直接获取用户IP来判断并推送 |
|
|
|
|
|
// const socketUrl = process.env.VUE_APP_WS_API + id |
|
|
|
|
|
const wsUri = window.g.prod.VUE_APP_BASE_API.replace('http', 'ws') + '/webSocket/' + id |
|
|
|
|
|
this.socket = new WebSocket(wsUri) |
|
|
|
|
|
// 监听socket打开 |
|
|
|
|
|
this.socket.onopen = function() { |
|
|
|
|
|
that.socket.send('测试客户端发送消息') |
|
|
|
|
|
} |
|
|
|
|
|
const _this = this |
|
|
|
|
|
// 监听socket消息接收 |
|
|
|
|
|
this.socket.onmessage = function(msg) { |
|
|
|
|
|
const data = JSON.parse(msg.data) |
|
|
|
|
|
_this.$confirm(data.msg, '提示', { |
|
|
|
|
|
confirmButtonText: '确定', |
|
|
|
|
|
closeOnClickModal: false, |
|
|
|
|
|
showCancelButton: false, |
|
|
|
|
|
type: 'warning' |
|
|
|
|
|
}).then(() => { |
|
|
|
|
|
_this.$router.push('/login') |
|
|
|
|
|
}).catch(() => { |
|
|
|
|
|
this.$message({ |
|
|
|
|
|
type: 'info', |
|
|
|
|
|
message: '已取消' |
|
|
|
|
|
}) |
|
|
|
|
|
}) |
|
|
|
|
|
} |
|
|
} |
|
|
|
|
|
}, |
|
|
// 监听socket错误 |
|
|
init: function() { |
|
|
this.socket.onerror = function() { |
|
|
this.timmer = setTimeout(() => { |
|
|
that.$notify({ |
|
|
sessionStorage.clear() |
|
|
title: '错误', |
|
|
this.logout() |
|
|
message: '服务器错误，无法接收实时报警信息', |
|
|
}, 1000 * 60 * 15) // 15分钟 https://blog.csdn.net/qq_42345108/article/details/103496456 |
|
|
type: 'error', |
|
|
}, |
|
|
duration: 0 |
|
|
logout() { |
|
|
|
|
|
this.$store.dispatch('LogOut').then(() => { |
|
|
|
|
|
location.reload() |
|
|
}) |
|
|
}) |
|
|
} |
|
|
} |
|
|
// 监听socket关闭 |
|
|
|
|
|
this.socket.onclose = function() { |
|
|
|
|
|
console.log('WebSocket已关闭') |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
</script> |
|
|
|
