在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`标志防止过度频繁地尝试连接。这种方式使得项目中的消息通信更加整洁和高效。