Vue连接websocket做全局通知

①在index.html中添加如下代码，连接websocket;

var websock = null
var serverPort = XX; //webSocket连接端口
localStorage.setItem(‘isOk’, ‘0’)
localStorage.setItem(‘tipsData’, ‘’)
var wsuri = “ws://” + ip + “:” + serverPort + “/websocket”;
if (websock == null) {
websock = new WebSocket(wsuri);
} else {
websock.close();
websock = null;
websock = new WebSocket(wsuri);
}
websock.onclose = function (e) {
websocketclose(e);
}
websock.onopen = function () {
websocketOpen();
}
//添加事件监听
websock.addEventListener(‘open’, function () {
websock.send(“online” + sessionStorage.getItem(‘token’));
});
websock.onmessage = function (event) {
if(sessionStorage.getItem(“user”) =null || sessionStorage.getItem(“user”)=undefined || sessionStorage.getItem(“user”)=""){
return
} //当用户退出后重新登录时，不会弹出之前的消息
var msg = event.data;
let error = msg.indexOf(“error:”);
if(error==0){
localStorage.setItem(‘isOk’, ‘1’)
}
localStorage.setItem(‘tipsData’, event.data) //获取到websocket传来的数据
}
websock.onerror = function () {
console.log(‘websocket通信发生错误！’)
}
window.onbeforeunload = function () {
websock.close()
}
websock.onclose = function (event) {
console.log(‘连接关闭’)
localStorage.setItem(‘isOk’, ‘0’)
localStorage.setItem(‘tipsData’, ‘’)
}
function websocketclose(e) {
console.log(“connection closed (” + e.code + “)”);
}
function websocketOpen(e) {
console.log(“连接成功”);
}

②在main.js中做一个定时器，每秒钟刷新一次，解析websocket传来的数据，以弹框的形式展示出来。

// 定时查看报告是否生成
setInterval(() => {
if(sessionStorage.getItem(“user”)=null || sessionStorage.getItem(“user”)=undefined || sessionStorage.getItem(“user”)=""){
return
}
if (localStorage.getItem(‘isOk’) === ‘1’) {
let tipsData = localStorage.getItem(‘tipsData’)
tipsData = tipsData.substring(6)
var arr = tipsData.split("_")
let building = arr[0]
let classroom = arr[1]
let message = arr[2]
let notifi = building + “教学楼” + classroom + “教室” + message
ElementUI.Notification({
title: ‘警告’,
message: notifi,
type: ‘error’,
position: ‘bottom-right’
});
localStorage.setItem(‘isOk’, ‘0’)
localStorage.setItem(‘tipsData’, ‘’)
// clearInterval(timer)
// 如果这里清除了定时器只有在页面重新加载后才能启用定时器,那就不能时时获得生成报告的信息了
}
}, 1000)

以上代码亲测有效，注意main.js中弹框的写法ElementUI.Notification({}）