vue3中对websoket的二次封装，拿来即用

相伴而行

于 2025-04-10 17:34:44 发布

阅读量389

点赞数 3

分类专栏： pc端vue知识点分享文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/able_me/article/details/147123756

版权

pc端vue知识点分享专栏收录该内容

11 篇文章

订阅专栏

封装的重点是响应式状态管理、自动重连、心跳检测、消息队列、生命周期管理和易用性。通过Composition API将这些功能模块化，方便在Vue3组件中复用。

1、在 Vue3 中对 WebSocket 进行封装时，可以利用 Composition API 实现更优雅的封装。下面是一个功能完善且支持自动重连、心跳检测的 WebSocket 封装方案：

import { ref, reactive, onUnmounted } from 'vue'

interface WebSocketOptions {
  // 自动重连次数（默认 3 次）
  reconnectLimit?: number
  // 重连间隔（默认 3000ms）
  reconnectInterval?: number
  // 心跳间隔（默认 30000ms）
  heartInterval?: number
  // 心跳消息（默认 ping）
  heartMessage?: string
  // 是否自动连接（默认 true）
  autoConnect?: boolean
  // 协议字符串或字符串数组
  protocols?: string | string[]
}

export function useWebSocket(url: string, options: WebSocketOptions = {}) {
  const {
    reconnectLimit = 3,
    reconnectInterval = 3000,
    heartInterval = 30000,
    heartMessage = 'ping',
    autoConnect = true,
    protocols = []
  } = options

  // 响应式状态
  const ws = ref<WebSocket | null>(null)
  const isConnected = ref(false)
  const messageQueue = reactive<any[]>([])
  const reconnectCount = ref(0)
  const timer = ref<number>()
  const heartTimer = ref<number>()

  // 事件处理器
  const handlers = reactive<{
    message: ((event: MessageEvent) => void)[]
    open: ((event: Event) => void)[]
    close: ((event: CloseEvent) => void)[]
    error: ((event: Event) => void)[]
  }>({
    message: [],
    open: [],
    close: [],
    error: []
  })

  // 心跳检测
  const heartCheck = () => {
    heartTimer.value = window.setInterval(() => {
      send(heartMessage)
    }, heartInterval)
  }

  // 清除心跳
  const clearHeartCheck = () => {
    heartTimer.value && clearInterval(heartTimer.value)
  }

  // 发送消息
  const send = (data: string | ArrayBuffer | Blob) => {
    if (isConnected.value && ws.value) {
      ws.value.send(data)
    } else {
      messageQueue.push(data)
    }
  }

  // 处理队列消息
  const processMessageQueue = () => {
    while (messageQueue.length > 0 && ws.value) {
      const message = messageQueue.shift()
      ws.value.send(message)
    }
  }

  // 关闭连接
  const close = () => {
    ws.value?.close()
  }

  // 创建连接
  const connect = () => {
    ws.value = new WebSocket(url, protocols)
    
    ws.value.onopen = (event) => {
      isConnected.value = true
      reconnectCount.value = 0
      processMessageQueue()
      heartCheck()
      handlers.open.forEach(handler => handler(event))
    }

    ws.value.onmessage = (event) => {
      handlers.message.forEach(handler => handler(event))
    }

    ws.value.onclose = (event) => {
      isConnected.value = false
      clearHeartCheck()
      handlers.close.forEach(handler => handler(event))
      if (reconnectCount.value < reconnectLimit) {
        timer.value = window.setTimeout(() => {
          reconnectCount.value++
          connect()
        }, reconnectInterval)
      }
    }

    ws.value.onerror = (event) => {
      isConnected.value = false
      clearHeartCheck()
      handlers.error.forEach(handler => handler(event))
      ws.value?.close()
    }
  }

  // 自动连接
  if (autoConnect) {
    connect()
  }

  // 组件卸载时清理
  onUnmounted(() => {
    close()
    timer.value && clearTimeout(timer.value)
    clearHeartCheck()
  })

  return {
    ws,
    isConnected,
    send,
    close,
    connect,
    messageQueue,
    onMessage: (handler: (event: MessageEvent) => void) => {
      handlers.message.push(handler)
    },
    onOpen: (handler: (event: Event) => void) => {
      handlers.open.push(handler)
    },
    onClose: (handler: (event: CloseEvent) => void) => {
      handlers.close.push(handler)
    },
    onError: (handler: (event: Event) => void) => {
      handlers.error.push(handler)
    }
  }
}

2、使用示例

<script setup lang="ts">
import { useWebSocket } from './useWebSocket'

const {
  isConnected,
  send,
  onMessage,
  onOpen,
  onClose
} = useWebSocket('wss://echo.websocket.org', {
  heartInterval: 15000,
  reconnectLimit: 5
})

onOpen(() => {
  console.log('连接已建立')
  send('Hello Server!')
})

onMessage((event) => {
  console.log('收到消息:', event.data)
})

onClose(() => {
  console.log('连接已关闭')
})
</script>

<template>
  <div>
    <p>连接状态: {{ isConnected ? '已连接' : '未连接' }}</p>
    <button @click="send('ping')">发送心跳</button>
  </div>
</template>

3、功能总结：