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) return
      const 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)
      }
    },
  }