WebSocket封装（TypeScript、单例模式、自动重连、事件监听、Vue中使用）

远小帅

已于 2024-07-23 17:59:54 修改

阅读量1.2k

点赞数 2

分类专栏：前端 Vue.js JavaScript 文章标签： typescript websocket 单例模式 vue.js 前端

于 2024-04-24 11:12:01 首次发布

本文链接：https://blog.youkuaiyun.com/qq_44600038/article/details/138153216

版权

文章介绍了如何在Vue3应用中使用SocketService类进行WebSocket连接的管理，包括连接状态监控、自动重连选项设置、事件监听和解除监听等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

export type AutoReconnectOptions = boolean | {
   
  maxRetries?: number
  retryInterval?: number
  onMaxRetriesReached?: Function
}

export enum ConnectionStatus {
   
  Disconnected = 'DISCONNECTED',
  Connected = 'CONNECTED',
  Error = 'ERROR'
}

class SocketService {
   
  private static instance: SocketService | null = null
  private ws: WebSocket | null = null
  private listeners: Record<string, Function[]> = {
   }
  private autoReconnect: AutoReconnectOptions = true
  private retries: number = 0
  private connectionStatus: ConnectionStatus = ConnectionStatus.Disconnected

  private constructor() {
   
    this.connect()
  }

  public static getInstance(): SocketService {
   
    if (!SocketService.instance) {
   
      SocketService.instance = new SocketService()
    }
    return SocketService.instance
  }

  public setAutoReconnectOptions(options: AutoReconnectOptions) {
   
    this.autoReconnect = options
  }

  public connect() {
   
    this.ws = new WebSocket('ws://localhost:3000/ws')<

最低0.47元/天解锁文章