vue3 使用websocket

使用Vue3实现WebSocket的步骤如下：

1.首先，需要安装WebSocket库。可以使用npm或yarn进行安装，命令如下：

npm install --save ws

2.在Vue组件中引入WebSocket库，并创建WebSocket连接。可以使用Vue提供的`onMounted`钩子函数来在组件挂载时创建WebSocket连接。具体代码如下：

<template>
  <div>
    <button @click="connect">连接</button>
    <button @click="disconnect">断开连接</button>
  </div>
</template>

<script>
import { onMounted, ref } from 'vue'
import WebSocket from 'ws'

export default {
  setup() {
    const ws = ref(null)

    const connect = () => {
      ws.value = new WebSocket('ws://localhost:8080')
      ws.value.onopen = () => {
        console.log('WebSocket连接成功')
      }

      ws.value.onmessage = (event) => {
        console.log('接收到消息：', event.data)
      }

      ws.value.onclose = () => {
        console.log('WebSocket连接关闭')
      }
    }

    const disconnect = () => {
      ws.value.close()
    }

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

    return {
      connect,
      disconnect
    }
  }
}
</script>

在上面的代码中，我们使用了Vue3的`setup`函数来创建组件。`setup`函数返回一个对象，该对象包含了组件中需要使用的变量和方法。在这个例子中，我们使用了`ref`函数来创建了一个名为`ws`的响应式变量，用于存储WebSocket连接对象。我们还定义了两个方法`connect`和`disconnect`，用于连接和断开WebSocket连接。在`onMounted`钩子函数中，我们调用了`connect`方法来创建WebSocket连接。

3.在组件销毁时，需要关闭WebSocket连接。可以使用Vue提供的`onUnmounted`钩子函数来在组件销毁时关闭WebSocket连接。具体代码如下：

<script>
import { onMounted, onUnmounted, ref } from 'vue'
import WebSocket from 'ws'

export default {
  setup() {
    const ws = ref(null)

    const connect = () => {
      ws.value = new WebSocket('ws://localhost:8080')

      ws.value.onopen = () => {
        console.log('WebSocket连接成功')
      }

      ws.value.onmessage = (event) => {
        console.log('接收到消息：', event.data)
      }

      ws.value.onclose = () => {
        console.log('WebSocket连接关闭')
      }
    }

    const disconnect = () => {
      ws.value.close()
    }

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

    onUnmounted(() => {
      disconnect()
    })

    return {
      connect,
      disconnect
    }
  }
}
</script>

在上面的代码中，我们使用了Vue3的`onUnmounted`钩子函数来在组件销毁时关闭WebSocket连接。在`setup`函数中，我们将`disconnect`方法添加到返回的对象中，以便在组件销毁时调用。