1. 新增消息管理类 2. socket消息类型js改为枚举类 3. 重连函数在使用时以参数传递进来

hcong

2024-11-27 6584cbef8a5829950c20b507e17445b97650e73f

 src/socket/FYWebSocket.js

@@ -1,9 +1,4 @@
import eventBus from './eventBus.js';
import {
  messageTypes,
  getByValue,
  isHeartbeatMessageByType
} from '@/enum/socketMessage.js';
import { SOCKET_MESSAGE_TYPE, getByValue } from '@/enum/socketMessage.js';
import { encodeMessage, decodeMessage } from './socketMessage.js';
import { $socket_base_url } from '@/api/index.js';
class FYWebSocket extends WebSocket {
@@ -16,15 +11,22 @@
   *    time: 心跳时间间隔
   *    timeout: 心跳超时间隔
   *    reconnect: 断线重连时间间隔
   * isReconnect 是否断线重连
   * reconnectFunc 断线重连函数
   * messageManager 消息管理器
   */
  init(heartBeatConfig, isReconnect) {
  init(reconnectFunc, messageManager) {
    this.onopen = this.openHandler; // 连接成功后的回调函数
    this.onclose = this.closeHandler; // 连接关闭后的回调 函数
    this.onmessage = this.messageHandler; // 收到服务器数据后的回调函数
    this.onerror = this.errorHandler; // 连接发生错误的回调方法
    this.heartBeatConfig = heartBeatConfig; // 心跳连接配置参数
    this.isReconnect = isReconnect; // 记录是否断线重连
    this.heartBeatConfig = {
      time: 30 * 1000,
      timeout: 2 * 1000,
      reconnect: 30 * 1000
    }; // 心跳连接配置参数
    this.isReconnect = typeof reconnectFunc === 'function'; // 记录是否断线重连
    this.reconnectFunc = reconnectFunc; // 断线重连函数
    this.messageManager = messageManager; // 消息处理管理器
    this.reconnectTimer = null; // 记录断线重连的时间器
    this.startHeartBeatTimer = null; // 记录心跳时间器
    this.webSocketState = false; // 记录socket连接状态 true为已连接
@@ -39,7 +41,7 @@
  }
  // 连接成功后的回调函数
  openHandler() {
    console.log('====onopen 连接成功====');
    console.log('====onopen websocket连接成功====');
    // socket状态设置为连接，做为后面的断线重连的拦截器
    this.webSocketState = true;
    // 判断是否启动心跳机制
@@ -53,22 +55,17 @@
    if (!(webSocketMsg && webSocketMsg != null && webSocketMsg != {})) {
      return;
    }
    console.log("webSocketMsg", webSocketMsg);
    
    const type = webSocketMsg.type;
    const data = webSocketMsg.data;
    let typeObj = getByValue(type);
    console.log("typeObj", typeObj);
    
    if (isHeartbeatMessageByType(type)) {
    if (type == 0) {
      // 将连接状态更新为在线
      this.webSocketState = true;
      eventBus.emit(typeObj.name, data);
      console.log('====onmessage 心跳检测====', data);
      console.log('====onmessage websocket心跳检测====', data);
    } else {
      // 发送事件
      eventBus.emit(typeObj.name, data);
      console.log(`====onmessage ${typeObj.label}====`, data);
      this.messageManager.emit(typeObj.name, data);
      console.log(`====onmessage websocket${typeObj.label}====`, data);
    }
  }
  // 连接关闭后的回调 函数
@@ -93,7 +90,7 @@
  startHeartBeat(time) {
    this.startHeartBeatTimer = setTimeout(() => {
      // 客户端每隔一段时间向服务端发送一个心跳消息
      this.sendMessage(messageTypes[0].value, Date.now());
      this.sendMessage('0', Date.now());
      this.waitingServer();
    }, time);
  }
@@ -106,12 +103,12 @@
        this.startHeartBeat(this.heartBeatConfig.time);
        return;
      }
      console.log('心跳无响应, 已经和服务端断线');
      console.log('websocket 心跳无响应, 已经和服务端断线');
      // 重新连接时，记得要先关闭当前连接
      try {
        this.close();
      } catch (error) {
        console.log('当前连接已经关闭');
        console.log('websocket 当前连接已经关闭');
      }
      // // 重新连接
      // this.reconnectWebSocket()
@@ -126,8 +123,9 @@
    }
    // 根据传入的断线重连时间间隔 延时连接
    this.reconnectTimer = setTimeout(() => {
      // 触发重新连接事件
      eventBus.emit('reconnect');
      // 触发重新连接函数
      console.log('====onerror websocket尝试重连====');
      this.reconnectFunc();
    }, this.heartBeatConfig.reconnect);
  }
}