npm install websocket --save-dev

pnpm install websocket --save-dev

import { onUnmounted } from 'vue'

//設(shè)置
interface SocketOptions {
  //心跳間隔
  heartbeatInterval?: number
  //超時重傳
  reconnectInterval?: number
  //最大重傳次數(shù)
  maxReconnectAttempts?: number
}

class Socket {
  //路徑
  url: string
  ws: WebSocket | null = null
  opts: SocketOptions
  //重傳次數(shù)
  reconnectAttempts: number = 0
  listeners: { [key: string]: Function[] } = {}
  //心跳間隔
  heartbeatInterval: number | null = null
  //構(gòu)造函數(shù)
  constructor(url: string, opts: SocketOptions = {}) {
    this.url = url
    this.opts = {
      //心跳間隔
      heartbeatInterval: 30000,
      //超時重傳
      reconnectInterval: 5000,
      //最大重傳次數(shù)
      maxReconnectAttempts: 5,
      ...opts
    }

    this.init()
  }
  //初始化
  init() {
    this.ws = new WebSocket(this.url)
    this.ws.onopen = this.onOpen.bind(this)
    this.ws.onmessage = this.onMessage.bind(this)
    this.ws.onerror = this.onError.bind(this)
    this.ws.onclose = this.onClose.bind(this)
  }
  //打開
  onOpen(event: Event) {
    console.log('WebSocket opened:', event)
    this.reconnectAttempts = 0
    this.startHeartbeat()
    this.emit('open', event)
  }
  //收到的WebSocket消息
  onMessage(event: MessageEvent) {
    // console.log('WebSocket message received:', event.data);
    this.emit('message', event.data)
  }
  //錯誤
  onError(event: Event) {
    console.error('WebSocket error:', event)
    this.emit('error', event)
  }
  //重連邏輯中，在連接失敗后自動重新連接
  onClose(event: CloseEvent) {
    console.log('WebSocket closed:', event)
    this.stopHeartbeat()
    this.emit('close', event)
    //重連邏輯中，在連接失敗后自動重新連接，但會限制重連的次數(shù)和每次重連之間的間隔時間
    if (this.opts.maxReconnectAttempts !== 0 && this.reconnectAttempts < this.opts.maxReconnectAttempts!) {
      setTimeout(() => {
        // console.log("我有錯誤了1111111111111111111111111111111111111");
        this.reconnectAttempts++
        this.init()
      }, this.opts.reconnectInterval)
    }
  }
  //開始心跳檢測
  startHeartbeat() {
    if (!this.opts.heartbeatInterval) return

    this.heartbeatInterval = window.setInterval(() => {
      if (this.ws?.readyState === WebSocket.OPEN) {
        this.ws.send('ping')
      }
    }, this.opts.heartbeatInterval)
  }
  //停止心跳檢測
  stopHeartbeat() {
    if (this.heartbeatInterval) {
      clearInterval(this.heartbeatInterval)
      this.heartbeatInterval = null
    }
  }
  //發(fā)送消息
  send(data: string) {
    if (this.ws?.readyState === WebSocket.OPEN) {
      this.ws.send(data)
    } else {
      console.error('WebSocket is not open. Cannot send:', data)
    }
  }
  //事件監(jiān)聽器注冊功能的實現(xiàn)
  on(event: string, callback: Function) {
    if (!this.listeners[event]) {
      this.listeners[event] = []
    }
    this.listeners[event].push(callback)
  }
  //從事件監(jiān)聽器中移除
  off(event: string) {
    if (this.listeners[event]) {
      delete this.listeners[event]
    }
  }
  //在事件監(jiān)聽器中觸發(fā)一個指定的事件
  emit(event: string, data: any) {
    this.listeners[event]?.forEach(callback => callback(data))
  }
}

export function useSocket(url: string, opts?: SocketOptions) {
  const socket = new Socket(url, opts)

  onUnmounted(() => {
    socket.off('open')
    socket.off('message')
    socket.off('error')
    socket.off('close')
    socket.ws?.close() // 關(guān)閉WebSocket連接
  })

  return {
    socket,
    send: socket.send.bind(socket),
    on: socket.on.bind(socket),
    off: socket.off.bind(socket)
  }
}

declare global {
  /**
   * Window 的類型提示
   */
  interface Window {
    __APP_INFO__: __APP_INFO__
    global_config: { wsURL: string }
  }
}

import { useSocket } from '@/utils/websocket'

// 注意：此處 useSocket() 中用的就是我們配置的全局地址
// 開發(fā)結(jié)束，打包給后端，后端同時可以自行修改 ipconfig.js 文件中 websokect 地址，這樣部署上線之后 websokect 也能正常運行
const { socket, on } = useSocket((window as any).global_config.wsURL)

on('close', () => console.log('Socket closed!'))
//webSocket連接上服務(wù)器時
on('open', (event: any) => {
  console.log('webSocket連接上服務(wù)器時', event)
})
socket.on('message', (data: any) => {
  if (data) {
   // TODO: 此處拿到后端推送過來的數(shù)據(jù)，進行你后續(xù)的數(shù)據(jù)渲染邏輯
   console.log(JSON.parse(data))
  }
})