用户登陆后即时推送业务信息,使用element-UI的Notification 通知进行提示,并通过Notification 通知的onClick方法进行页面跳转。
1、创建页面时即生效
我写在了首页,保证一进入系统即开始接收
created() {
// 连接webSocket,用于接收后台实时报警信息推送
this.webSocket();
},
2、websocket具体操作
methods: {
webSocket() {
const that = this;
if (typeof (WebSocket) == 'undefined') {
this.$notify({
title: '提示',
message: '当前浏览器无法接收实时报警信息,请使用谷歌浏览器!',
type: 'warning',
duration: 0
});
} else {
// 获取token保存到vuex中的用户信息,此处仅适用于本项目,注意删除或修改
store.dispatch('GetInfo').then(info => {
// 实例化socket,这里我把用户名传给了后台,使后台能判断要把消息发给哪个用户,其实也可以后台直接获取用户IP来判断并推送
const socketUrl = 'ws://127.0.0.1:8868/websocket/' + info.username;
this.socket = new WebSocket(socketUrl);
// 监听socket打开
this.socket.onopen = function() {
console.log('浏览器WebSocket已打开');
};
// 监听socket消息接收
this.socket.onmessage = function(msg) {
// 转换为json对象
const data = JSON.parse(msg.data);
that.$notify({
title: '建立连接',
// 这里也可以把返回信息加入到message中显示
message: '实时报警服务连接成功,点击查看报警信息详情',
type: 'success',
duration: 0,
onClick: () => {
that.$router.push({
path: '/alarmManage/monitAlarmInfo'
});
}
})
};
// 监听socket错误
this.socket.onerror = function() {
that.$notify({
title: '错误',
message: '服务器错误,无法接收实时报警信息',
type: 'error',
duration: 0
});
};
// 监听socket关闭
this.socket.onclose = function() {
console.log('WebSocket已关闭');
}
})
}
}
}