vue3封裝websocket添加心跳機制

### 封装 WebSocket 并实现心跳检测

为了在 Vue3 中封装 WebSocket 和实现心跳检测功能，可以创建一个专门用于处理 WebSocket 连接和服务端通信的模块。此方法不仅能够简化组件间的 WebSocket 使用逻辑，还能有效管理连接状态以及确保通过心跳机制维持稳定连接。

#### 创建 `websocket.js` 文件来定义 WebSocket 类

class WS {
    constructor(url, heartbeatInterval = 50) {
        this.url = url;
        this.websocket = null;
        this.heartbeatTimer = null;
        this.reconnectAttempts = 0; // 断线重连尝试次数
        this.maxReconnectAttempts = 5; // 最大重连次数
        this.connect(heartbeatInterval);
    }

    connect(interval) {
        this.websocket = new WebSocket(this.url);

        this.websocket.onopen = () => {
            console.log('WebSocket connection established');
            clearInterval(this.heartbeatTimer); // 清除之前的定时器以防重复设置
            this.startHeartbeat(interval);
        };

        this.websocket.onerror = (error) => {
            console.error(`WebSocket error observed: ${error.message}`);
        };

        this.websocket.onmessage = (event) => {
            const dataJSON = event.data;
            try {
                const parsedData = JSON.parse(dataJSON);
                if(parsedData.type === 'pong') { // 收到服务器的心跳响应
                    console.log('Received pong message from server.');
                } else {
                    // 处理其他类型的消息...
                }
            } catch(e){
                console.warn('Non-JSON message received:', dataJSON);
            }
        };

        this.websocket.onclose = () => {
            console.log('WebSocket closed, attempting to reconnect...');
            setTimeout(() => {
                if (this.reconnectAttempts < this.maxReconnectAttempts) {
                    this.reconnect();
                } else {
                    console.error('Max reconnection attempts reached.');
                }
            }, 1000 * ++this.reconnectAttempts);
        };
    }

    startHeartbeat(interval) {
        this.sendPingMessage(); // 发送首次ping请求
        this.heartbeatTimer = setInterval(() => {
            this.sendPingMessage();
        }, interval);
    }

    sendPingMessage() {
        this.websocket.send(JSON.stringify({ type: "ping" }));
        console.log('Sent ping message to the server.');
    }

    reconnect() {
        this.connect(50); // 当前采用固定间隔时间重新建立连接
    }

    close() {
        clearInterval(this.heartbeatTimer);
        this.websocket.close();
    }
}
export default WS;

上述代码展示了如何构建一个带有自动重连特性和简单心跳监测系统的 WebSocket 客户端类[^1]。每当成功打开一个新的 WebSocket 链接时，会启动一个周期性的函数向服务端发送 “ping” 请求；一旦收到对应的 “pong”，则证明链路正常工作。如果未能及时获取回应，则可能意味着网络状况不佳或服务不可达，在这种情况下客户端应该考虑采取措施恢复链接。

#### 在项目入口处初始化 WebSocket 实例并挂载至全局对象上

接下来是在项目的主文件 (`main.js`) 中实例化上面所写的 WebSocket 对象，并将其绑定给 Vue 的原型属性以便于在整个应用范围内访问：

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import WS from './path/to/WebSocketClass'; // 替换成实际路径

const app = createApp(App);

let websocketInstance = new WS("ws://example.com/socket", 50);
app.config.globalProperties.$socket = websocketInstance;

app.mount('#app');

这样做的好处是可以让任何地方都能方便地调用 `$socket` 来操作 WebSocket 接口而无需再次导入该库。