billd-live/src/network/websocket.ts

import { Socket, io } from 'socket.io-client';

import { useNetworkStore } from '@/store/network';

// websocket连接状态
export enum WsConnectStatusEnum {
  /** 已连接 */
  connection = 'connection',
  /** 连接中 */
  connecting = 'connecting',
  /** 已连接 */
  connected = 'connected',
  /** 断开连接中 */
  disconnecting = 'disconnecting',
  /** 已断开连接 */
  disconnect = 'disconnect',
  /** 重新连接 */
  reconnect = 'reconnect',
  /** 客户端的已连接 */
  connect = 'connect',
}

// websocket消息类型
export enum WsMsgTypeEnum {
  /** 用户进入聊天 */
  join = 'join',
  /** 用户进入聊天完成 */
  joined = 'joined',
  /** 用户进入聊天 */
  otherJoin = 'otherJoin',
  /** 用户退出聊天 */
  leave = 'leave',
  /** 用户退出聊天完成 */
  leaved = 'leaved',
  /** 当前所有在线用户 */
  liveUser = 'liveUser',
  /** 人满了 */
  full = 'full',
  /** 用户发送消息 */
  message = 'message',
  /** 管理员在线 */
  adminIn = 'adminIn',
  offer = 'offer',
  answer = 'answer',
  candidate = 'candidate',
}

export class WebSocketClass {
  socketIo: Socket | null = null;
  status: WsConnectStatusEnum = WsConnectStatusEnum.disconnect;
  url = '';

  roomId = '-1';
  isAdmin = false;

  constructor({ roomId, url, isAdmin }) {
    if (!window.WebSocket) {
      alert('当前环境不支持WebSocket！');
      return;
    }
    this.roomId = roomId;
    this.isAdmin = isAdmin;

    this.url = url;
    this.socketIo = io(url, { transports: ['websocket'] });
    this.update();

    // // websocket连接成功
    // this.socketIo.on(WsConnectStatusEnum.connect, (socket) => {
    //   console.log('websocket连接成功', socket);
    //   this.status = WsStatusEnum.connect;
    //   this.update();
    //   this.socketIo?.emit(WsMsgTypeEnum.join, { roomId: this.roomId });
    // });

    // // websocket连接断开
    // this.socketIo.on(WsConnectStatusEnum.disconnect, () => {
    //   console.log('websocket连接断开', this);
    //   this.status = WsStatusEnum.disconnect;
    //   this.update();
    // });

    // // 用户加入房间
    // this.socketIo.on(WsMsgTypeEnum.join, (data) => {
    //   console.log('用户加入房间', data);
    // });

    // // 其他用户加入房间
    // this.socketIo.on(WsMsgTypeEnum.otherJoin, (data) => {
    //   console.log('其他用户加入房间', data);
    // });

    // // 用户离开房间
    // this.socketIo.on(WsMsgTypeEnum.leave, (data) => {
    //   console.log('用户离开房间', data);
    // });

    // // 用户发送消息
    // this.socketIo.on(WsMsgTypeEnum.message, (data) => {
    //   console.log('用户发送消息', data);
    // });

    // // 用户发送 offer
    // this.socketIo.on(WsMsgTypeEnum.offer, (data) => {
    //   console.log('用户发送 offer', data);
    // });

    // // 用户发送 answer
    // this.socketIo.on(WsMsgTypeEnum.answer, (data) => {
    //   console.log('用户发送 answer', data);
    // });
  }

  // 发送websocket消息
  send = ({ msgType, data }: { msgType: WsMsgTypeEnum; data?: any }) => {
    console.log('【websocket】发送websocket消息', msgType, data);
    this.socketIo?.emit(msgType, {
      roomId: this.roomId,
      socketId: this.socketIo.id,
      data,
      isAdmin: this.isAdmin,
    });
  };

  // 更新store
  update = () => {
    const networkStore = useNetworkStore();
    networkStore.updateWsMap(this.roomId, this);
  };

  // 手动关闭websocket连接
  close = () => {
    console.warn('手动关闭websocket连接', this.socketIo?.id);
    this.socketIo?.close();
  };

  // 连接websocket
  connect = () => {};
}