WebSocket封装成工具类，实现心跳监测、断开重连

本文主要是介绍WebSocket封装成工具类，实现心跳监测、断开重连，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1. 工具类代码

import { Message } from 'element-ui';export class WebSocketManager {constructor(url, reconnectInterval = 5000, onMessageCallback) {this.url = url;this.reconnectInterval = reconnectInterval; // 重连等待时间（毫秒）this.onMessageCallback = onMessageCallback; // 接收外部回调函数this.webSocket = null;this.reconnectAttempts = 0; // 重连尝试次数this.reconnectTimeout = null; // 重连定时器this.heartbeatInterval = null; // 心跳定时器this.heartbeatTimeout = 30000; // 心跳超时时间（毫秒）this.connect(); // 初始化连接}connect() {if (typeof WebSocket === 'undefined') {Message.warning('您的浏览器不支持 WebSocket，无法获取数据');return false;}this.webSocket = new WebSocket(this.url);this.webSocket.onopen = this.onWebSocketOpen.bind(this);this.webSocket.onmessage = this.onWebSocketMessage.bind(this);this.webSocket.onerror = this.onWebSocketError.bind(this);this.webSocket.onclose = this.onWebSocketClose.bind(this);}sendHeartbeat() {if (this.webSocket && this.webSocket.readyState === WebSocket.OPEN) {// 跟后端协商数据格式，发送心跳消息const obj = {toUserId: "-1",text: "[{}]"};const jsonString = JSON.stringify(obj);// 发送心跳消息this.webSocket.send(jsonString);// 设置心跳超时检查this.heartbeatTimeout = setTimeout(() => {if (this.webSocket && this.webSocket.readyState === WebSocket.OPEN) {this.webSocket.close(1000, '心跳超时，主动断开连接');this.reconnect(); // 心跳超时后尝试重连}}, this.heartbeatTimeout);}}onWebSocketOpen(event) {console.log('WebSocket 已连接:', event);this.reconnectAttempts = 0; // 连接成功后重连尝试次数归零// 启动定时发送心跳消息// this.heartbeatInterval = setInterval(() => this.sendHeartbeat(), 5000);}onWebSocketMessage(event) {console.log('收到 WebSocket 消息:', event.data);// 如果是心跳响应，则清除心跳超时定时器if (event.data === 'heartbeat') {clearTimeout(this.heartbeatTimeout);} else if (event.data === '连接成功') {return;} else {// 将收到的数据传递给回调函数if (this.onMessageCallback) {this.onMessageCallback(event.data);}}}onWebSocketError(event) {console.error('WebSocket 发生错误:', event);}onWebSocketClose(event) {console.log('WebSocket 已断开:', event);// 清理心跳相关的定时器clearInterval(this.heartbeatInterval);clearTimeout(this.heartbeatTimeout);// 如果重连尝试次数超过限制，则不再尝试重连if (this.reconnectAttempts >= 20) {console.error(`超过重连尝试次数限制20次，放弃重连。`);} else {this.reconnect(); // 尝试重连}}reconnect() {this.reconnectAttempts++; // 重连尝试次数加一console.log(`正在进行第 ${this.reconnectAttempts} 次重连尝试`);this.webSocket = null; // 断开现有连接this.heartbeatTimeout = null; // 清理心跳超时定时器this.heartbeatInterval = null; // 清理心跳定时器// 等待一段时间后重新连接this.reconnectTimeout = setTimeout(() => {this.connect();}, this.reconnectInterval);}sendWebSocketMessage(message) {if (this.webSocket && this.webSocket.readyState === WebSocket.OPEN) {this.webSocket.send(message);}}close() {if (this.webSocket) {this.webSocket.close(); // 关闭 WebSocket 连接}clearInterval(this.heartbeatInterval); // 清理心跳定时器clearTimeout(this.reconnectTimeout); // 清理重连定时器clearTimeout(this.heartbeatTimeout); // 清理心跳超时定时器}
}

2. 使用

import { WebSocketManager } from '@/utils/websocket.js'
export default {data() {return {list: [],webSocketManager: null // 实时巡检websocket}},mounted() {this.setRealTimeRouteInspection()},beforeDestroy() {// 组件销毁时关闭 WebSocket 连接if (this.webSocketManager) {this.webSocketManager.close()}},methods: {setRealTimeRouteInspection() {if (!this.list.length) returnconst newOnFlyList = this.list.filter((item) => item.xjstatus == '1') // 筛选出执行中的工单const ids = newOnFlyList.map((item) => item.tid)// 获取实时巡检路线// window.DSE.realTrajectoryServerPath换成你自己的ip地址，ids[0]换成你自己的参数this.webSocketManager = new WebSocketManager(`${window.DSE.realTrajectoryServerPath}/zhxj/api/pushMessage/${ids[0]}`,5000,this.handleWebSocketMessage)},// 获取并处理websocket数据handleWebSocketMessage(rawData) {try {// 解析数据，需要换成你们自己后端定义的数据格式const data = JSON.parse(rawData)const tackList = JSON.parse(data.text)if (!tackList.length) {console.log('暂无实时巡检轨迹')return}const realTimeTracklist = tackList.map((el) => [Number(el.lgtd),Number(el.lttd)])console.log('🚀实时巡检轨迹数据:', realTimeTracklist)} catch (error) {throw new Error(error)}},}