iot-ui-plus/src/utils/socket.ts

/**
 * Author: Fu Guobin
 * Date: 2022/08/02
 * Last Modified by: Fu Guobin
 * Last Modified time: 2023/09/21
 * Copyright:Daniel(Fu Guobin)
 * Description:websocket方法封装
 */
import type { Action } from 'element-plus';
import mitt from '@/plugins/bus';

class WebSocketService {
  url: string;
  websocket: WebSocket | null;
  isInitialized: boolean;
  isConnected: boolean;
  heartTimer: number | null;
  heartbeatInterval: number;
  reconnectInterval: number;
  maxReconnectAttempts: number;
  reconnectAttempts: number;
  data: any;

  constructor() {
    this.url = '';
    this.websocket = null;
    this.isInitialized = false;
    this.isConnected = false; //连接状态
    this.heartTimer = null; //心跳计时
    this.heartbeatInterval = 30000; // 默认心跳30秒
    this.reconnectInterval = 10000; // 默认重连10秒
    this.maxReconnectAttempts = 5; // 默认尝试重连5次
    this.reconnectAttempts = 0; //重连次数
    this.data = null;
  }

  initialize(url: string): void {
    //初始化
    console.log('websocket初始化');
    this.url = url;
    this.websocket = new WebSocket(url);
    console.log('readyState1--', this.websocket?.readyState);
    this.websocket.onopen = e => {
      console.log('readyState--', this.websocket?.readyState);
      console.log('websocket onopen--', e);
    };
    this.websocket.onopen = this.onOpen.bind(this);
    this.websocket.onclose = this.onClose.bind(this);
    this.websocket.onerror = this.onError.bind(this);
    this.websocket.onmessage = this.onMessage.bind(this);
    this.isInitialized = true;
  }

  onOpen(): void {
    console.log('readyState2--', this.websocket?.readyState);
    console.log('websocket onOpen');
    this.isConnected = true; // 连接状态
    this.reconnectAttempts = 0; // 重置重连次数
    this.startHeartbeat();
  }

  onSend(data: any): void {
    //发送消息处理
    console.log('websocketSend:', JSON.stringify(data));
    if (this.isConnected) {
      this.websocket?.send(JSON.stringify(data));
    }
  }

  onMessage(event: MessageEvent): void {
    //获取消息处理
    if (event.data != '连接成功') {
      const response = JSON.parse(event.data);
      console.log('response:', response);
      this.data = response;
      // 处理返回的数据
      if (response.code === 'datareal') {
        console.log('table');
        mitt.emit('tableMessage', response);
      } else if (response.code === 'alertDev') {
        console.log('waring');
        mitt.emit('waringMessage', response);
      } else if (response.code === 'respMsg') {
        if (response.data[0].code === -1 || response.data[0].code === 1) {
          this.close(false);
          ElMessageBox.alert(response.msg, '提示', {
            // if you want to disable its autofocus
            // autofocus: false,
            confirmButtonText: 'OK',
            callback: (action: Action) => {
              localStorage.clear();
              window.location.href = '/';
            }
          });
        }
        console.log(response.msg);
      }
    }
  }

  onClose(): void {
    // 关闭WebSocket连接的处理逻辑
    console.log('websocket关闭');
    // this.isInitialized = status === false ? false : true;
    this.isConnected = false; //关闭连接
    this.stopHeartbeat(); //关闭心跳
    if (this.isInitialized) {
      console.log('WebSocke尝试重连1');
      this.tryReconnect();
    }
  }

  onError(error: Event): void {
    // 错误处理的逻辑
    console.error('WebSocket连接错误:', error);
    ElNotification({
      message: 'webSocket连接发生错误,正在尝试重连…',
      type: 'error'
    });
    this.isConnected = false; //关闭连接
    this.stopHeartbeat(); //关闭心跳
    if (this.isInitialized) {
      console.log('WebSocke尝试重连2');
      this.tryReconnect();
    }
  }

  tryReconnect() {
    //尝试重连
    console.log('WebSocket尝试重连:', this.reconnectAttempts);
    if (this.reconnectAttempts < this.maxReconnectAttempts) {
      setTimeout(() => {
        this.reconnectAttempts++;
        this.initialize(this.url);
      }, this.reconnectInterval);
    } else {
      this.close(false);
    }
  }

  startHeartbeat() {
    // 发送心跳
    console.log('websocket发送心跳');
    this.heartTimer = setInterval(() => {
      console.log('websocket心跳计时--', this.heartTimer);
      if (this.websocket?.readyState === WebSocket.OPEN) {
        const userStorageInfo = sessionStorage.getItem('userInfo');
        const userInfo = JSON.parse(userStorageInfo === null ? '' : userStorageInfo);
        const hearData = {
          code: 'heart',
          data: {
            username: userInfo.userName
          }
        };
        console.log(hearData);
        this.websocket.send(JSON.stringify(hearData)); //心跳消息
      }
    }, this.heartbeatInterval);
  }

  stopHeartbeat() {
    // 停止心跳
    console.log('websocket停止心跳');
    if (this.heartTimer != null) {
      clearInterval(this.heartTimer);
      this.heartTimer = null;
    }
    console.log('websocket停止心跳--', this.heartTimer);
  }

  close(status: any): void {
    console.log('close--', status);
    this.isInitialized = status;
    this.websocket?.close();
    console.log('websocket连接已关闭');
  }
}

const webSocketService = new WebSocketService();

export default webSocketService;