Vue项目全局WebSocket消息监听与设置

在Vue项目中实现全局消息链接监听，主要依赖WebSockets通信技术，以实现实时消息传递。以下是如何在整个项目中设置和管理WebSocket连接的步骤： 1. 全局定义: 在项目中创建一个名为`global.js`的模块，用于集中管理WebSocket的相关操作。在这个文件中，我们定义了一个对象`ws`，用于存储当前的WebSocket实例，以及一个`setWs`方法，用于更新WebSocket连接。 ```javascript // global.js export default { ws: {}, // 存储WebSocket实例 setWs: function(newWs) { this.ws = newWs; } }; ``` 2. Vue原型扩展: 在`main.js`中，我们导入`global.js`并将其挂载到Vue的原型上，这样每个Vue组件都能通过`this.$global`访问到这些全局方法。 ```javascript // main.js import global from '_lib/global.js'; Vue.prototype.$global = global; ``` 3. WebSocket实例管理: 在组件中，比如`app.vue`，我们需要创建一个方法来处理WebSocket连接。这里创建了一个`getWebSocket`函数，它负责初始化WebSocket连接、错误处理、重连逻辑和心跳检查。在页面加载完成后，会根据用户标识（如`localStorage.getItem('userInfo').id`）构造WebSocket URL。 ```javascript // app.vue methods: { getWebSocket() { let that = this; const tagHost = window.location.host; const userId = JSON.parse(localStorage.getItem('userInfo')).id; const wsUrl = `ws://${tagHost}/api/message?group=qualityInspector&userMark=${userId}`; // 实例化WebSocket var socket = new WebSocket(wsUrl); that.$global.setWs(socket); // 错误处理和重连逻辑 socket.onerror = function(event) { that.reconnect(wsUrl); that.lockReconnect = false; }; socket.onclose = function(event) { console.log('websocket服务关闭了'); that.reconnect(wsUrl); that.lockReconnect = false; }; // 连接成功后执行心跳检查 socket.onopen = function(event) { socket.send(event); // 发送初始化信息 heartCheck.reset().start(); // 重新开始心跳检查 console.log('连接成功'); that.lockReconnect = true; // 防止连续多次尝试连接 } } ``` 通过这样的设计，Vue项目中的任何地方都可以利用`$global.ws`进行全局消息发送和接收，而无需每次都手动创建WebSocket实例。当WebSocket连接断开时，`reconnect`方法会重新尝试连接，并且通过设置`lockReconnect`标志防止过度频繁地尝试连接。这种方式使得项目中的消息通信更加整洁和高效。