vue3 + vite 封装websocket 加 心跳机制

好的，我理解你的问题是关于在 Vue 3 和 Vite 环境下封装 WebSocket 和心跳机制的方法。下面是一个示例代码，供你参考：

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

export default function useWebSocket(url) {
  const message = ref('')
  let socket = null

  const connectWebSocket = () => {
    socket = new WebSocket(url)

    socket.onopen = () => {
      console.log('WebSocket connected')
      socket.send('Hello, WebSocket')
    }

    socket.onmessage = event => {
      message.value = event.data
    }

    socket.onclose = () => {
      console.log('WebSocket disconnected')
      setTimeout(() => {
        connectWebSocket()
      }, 5000)
    }
  }

  const startHeartbeat = () => {
    setInterval(() => {
      if (socket.readyState === WebSocket.OPEN) {
        socket.send('Heartbeat')
      }
    }, 3000)
  }

  onMounted(() => {
    connectWebSocket()
    startHeartbeat()
  })

  onUnmounted(() => {
    socket.close()
  })

  return {
    message
  }
}

上面的代码中，我们定义了一个名为 `useWebSocket` 的自定义 Hook，它接收一个 URL 参数，用于指定 WebSocket 服务器的地址。在 `useWebSocket` 函数内部，我们使用 `ref` 创建了一个响应式的 `message` 变量，用于存储 WebSocket 收到的消息。然后，我们声明了一个 `socket` 变量，用于存储 WebSocket 连接对象。

接着，我们定义了 `connectWebSocket` 函数，它用于创建 WebSocket 连接，并在连接打开、收到消息、连接关闭时分别执行对应的操作。当连接关闭时，我们使用 `setTimeout` 函数在 5 秒后重新连接 WebSocket。

然后，我们定义了 `startHeartbeat` 函数，它用于定时发送心跳包。在 `onMounted` 生命周期钩子中，我们调用了 `connectWebSocket` 和 `startHeartbeat` 函数。在 `onUnmounted` 生命周期钩子中，我们关闭了 WebSocket 连接。最后，我们返回 `message` 变量，以便在组件中使用。

使用这个自定义 Hook 的示例代码如下：

<template>
  <div>{{ message }}</div>
</template>

<script>
import useWebSocket from './useWebSocket'

export default {
  setup() {
    const { message } = useWebSocket('wss://example.com/ws')

    return {
      message
    }
  }
}
</script>

在组件的 `setup` 函数中，我们调用了 `useWebSocket` 自定义 Hook，将返回的 `message` 变量绑定到模板中的 `<div>` 元素上。这样，我们就完成了在 Vue 3 和 Vite 环境下封装 WebSocket 和心跳机制的操作。