// App.vue
export default {data() {return {// socket参数socket: null,timeout: 10 * 1000, // 45秒一次心跳timeoutObj: null, // 心跳心跳倒计时serverTimeoutObj: null, // 心跳倒计时timeoutnum: null, // 断开 重连倒计时lockReconnect: false, // 防止websocket: null};},mounted() {this.initWebSocket(userId); // userId为socket链接的参数},methods：{initWebSocket(supplierId) {// WebSocket与普通的请求所用协议有所不同，ws等同于http，wss等同于httpslet wsUrl = `wss://192.168.1.33/rest/supplier-api/wss/websocket/${userId}`;this.websocket = new WebSocket(wsUrl);this.websocket.onopen = this.websocketonopen;this.websocket.onerror = this.websocketonerror;this.websocket.onmessage = this.setOnmessageMessage;this.websocket.onclose = this.websocketclose;// 监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。// window.onbeforeunload = that.onbeforeunload},start() {console.log('start');//清除延时器this.timeoutObj && clearTimeout(this.timeoutObj);this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj);this.timeoutObj = setTimeout(() => {if (this.websocket && this.websocket.readyState == 1) {this.websocket.send('heartBath');//发送消息，服务端返回信息，即表示连接良好，可以在socket的onmessage事件重置心跳机制函数} else {this.reconnect();}//定义一个延时器等待服务器响应，若超时，则关闭连接，重新请求server建立socket连接this.serverTimeoutObj = setTimeout(() => {this.websocket.close();}, this.timeout)}, this.timeout)},reset() { // 重置心跳// 清除时间clearTimeout(this.timeoutObj);clearTimeout(this.serverTimeoutObj);// 重启心跳this.start();},// 重新连接reconnect() {if (this.lockReconnect) returnthis.lockReconnect = true;//没连接上会一直重连，设置延迟避免请求过多this.timeoutnum && clearTimeout(this.timeoutnum);this.timeoutnum = setTimeout(() => {this.initWebSocket();this.lockReconnect = false;}, 5000)},async setOnmessageMessage(event) {console.log(event.data, '获得消息');this.reset();// 自定义全局监听事件window.dispatchEvent(new CustomEvent('onmessageWS', {detail: {data: event.data}}))// //发现消息进入    开始处理前端触发逻辑// if (event.data === 'success' || event.data === 'heartBath') return},websocketonopen() {//开启心跳this.start();console.log("WebSocket连接成功!!!"+new Date()+"----"+this.websocket.readyState);},websocketonerror(e) {                console.log("WebSocket连接发生错误" + e);              },websocketclose(e) {this.websocket.close();clearTimeout(this.timeoutObj);clearTimeout(this.serverTimeoutObj);console.log("WebSocket连接关闭");},websocketsend(messsage) {that.websocket.send(messsage)},closeWebSocket() { // 关闭websocketthat.websocket.close()},}

其他页面监听数据

mounted () {// 添加socket通知监听window.addEventListener('onmessageWS', this.getSocketData)
},
methods: {// 收到消息处理getSocketData (res) {if (res.detail.data === 'success' || res.detail.data === 'heartBath') return// ...业务处理},
}

其他页面放松信息就需要创建一个global.js

// global.js
export default {ws: {},setWs: function(newWs) {this.ws = newWs}
}

挂载到全局main.js

import global from './utils/global';
Vue.prototype.$global = global

修改app.vue

export default {data() {return {// socket参数socket: null,timeout: 10 * 1000, // 45秒一次心跳timeoutObj: null, // 心跳心跳倒计时serverTimeoutObj: null, // 心跳倒计时timeoutnum: null, // 断开 重连倒计时lockReconnect: false, // 防止websocket: null,};},mounted() {setTimeout(()=>{this.initWebSocket();},1500)},methods: {initWebSocket() {this.websocket = new WebSocket(`/socket?token=${window.localStorage.getItem("token")}`);this.$global.setWs(this.websocket)// this.websocket.onopen = this.websocketonopen;this.websocket.onerror = this.websocketonerror;this.websocket.onmessage = this.setOnmessageMessage;},start() {console.log("start");//清除延时器this.timeoutObj && clearTimeout(this.timeoutObj);this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj);this.timeoutObj = setTimeout(() => {if (this.websocket && this.websocket.readyState == 1) {// this.websocket.send("heartBath"); //发送消息，服务端返回信息，即表示连接良好，可以在socket的onmessage事件重置心跳机制函数} else {this.reconnect();}//定义一个延时器等待服务器响应，若超时，则关闭连接，重新请求server建立socket连接this.serverTimeoutObj = setTimeout(() => {this.websocket.close();}, this.timeout);}, this.timeout);},reset() {// 重置心跳// 清除时间clearTimeout(this.timeoutObj);clearTimeout(this.serverTimeoutObj);// 重启心跳this.start();},// 重新连接reconnect() {if (this.lockReconnect) return;this.lockReconnect = true;//没连接上会一直重连，设置延迟避免请求过多this.timeoutnum && clearTimeout(this.timeoutnum);this.timeoutnum = setTimeout(() => {this.initWebSocket();this.lockReconnect = false;}, 5000);},async setOnmessageMessage(event) {console.log(event.data, "获得消息");// this.reset();// 自定义全局监听事件window.dispatchEvent(new CustomEvent("onmessageWS", {detail: {data: event.data,},}));// //发现消息进入    开始处理前端触发逻辑// if (event.data === 'success' || event.data === 'heartBath') return},websocketonopen() {//开启心跳this.start();console.log("WebSocket连接成功!!!" + new Date() + "----" + this.websocket.readyState);},websocketonerror(e) {console.log("WebSocket连接发生错误" + e);},websocketclose(e) {this.websocket.close();clearTimeout(this.timeoutObj);clearTimeout(this.serverTimeoutObj);console.log("WebSocket连接关闭");},websocketsend(messsage) {this.websocket.send(messsage);},closeWebSocket() {// 关闭websocketthis.websocket.close();},},
};

其他页面发送send时

this.$global.ws.send(JSON.stringify(obj))