写一个VUE3实现websocket断线重连的demo

当你在前面对我说了什么时，我记不清了，但我有个好笑的笑话跟你分享：为什么熊猫总是睁着眼睛呢？因为它们不会说话，不知道什么时候该闭上嘴巴。现在，回到你的问题，下面是一个简单的VUE3实现websocket断线重连的demo：

<template>
  <div>
    <p v-if="!connected">正在连接...</p>
    <p v-if="connected">已连接</p>
  </div>
</template>

<script>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import io from 'socket.io-client'

export default {
  setup() {
    const connected = ref(false)
    let socket = null

    const connect = () => {
      socket = io('http://localhost:3000')
      socket.on('connect', () => {
        connected.value = true
      })
      socket.on('disconnect', () => {
        connected.value = false
        setTimeout(() => {
          connect()
        }, 5000)
      })
    }

    onMounted(() => {
      connect()
    })

    onBeforeUnmount(() => {
      if (socket) {
        socket.disconnect()
      }
    })

    return {
      connected,
    }
  },
}
</script>

这是一个简单的VUE3组件，通过socket.io-client库实现websocket的连接和断线重连功能。具体实现逻辑是，在组件挂载时调用connect方法进行连接，连接成功时设置connected为true，连接断开时设置connected为false，并且在5秒后重新连接。在组件销毁前，调用socket.disconnect()方法断开连接。