index.js 文件下封装 getSocket 方法:
function getSocket(url, params, callback) { let socket; if (typeof(WebSocket) === 'undefined') { alert('您的浏览器不支持WebSocket') } else { console.log('您的浏览器支持WebSocket'); // 初始化 WebSocket 对象,指定要连接的服务器地址与端口建立连接 socket = new WebSocket(url); // 打开事件 - MDN中使用 addEventListener 添加监听事件的 socket.onopen = function() { console.log('Socket 已打开'); socket.send(params); }; // 获得消息事件 socket.onmessage = function(msg) { // 发现消息进入, 开始处理前端触发逻辑 callback(msg, socket); }; // 关闭事件 socket.onclose = function() { console.log('Socket 已关闭'); }; // 发生了错误事件 socket.onerror = function() { console.log('Socket 发生了错误,请刷新页面'); // 此时可以尝试刷新页面 }; } } export { getSocket };
页面中引入:
import { getSocket } from "@/plugin/websocket";
页面使用:
getSocket("ws://localhost:8000", "", (data, ws) => { let res = data.data; // 保存数据对象, 以便发送消息 this.wsData = ws; let msgList = JSON.parse(res); //消息弹窗 let notify = () => { this.$notify.info({ title: msgList.subjectName, message: msgList.title }); }; if (msgList.orgCode == undefined) { notify(); return false; } //当前用户orgCode 是否与推送orgCode 相等 if (this.getUserInfo().orgCode == msgList.orgCode) { notify(); } });