vue3使用WebSocket

要在Vue 3中使用WebSocket，可以使用Vue提供的生命周期函数和ref来创建WebSocket对象并监听其事件。下面是一个简单的例子：

<template>
  <div>
    <p v-for="message in messages" :key="message">{{ message }}</p>
  </div>
</template>

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

export default {
  setup() {
    const messages = ref([]);
    const ws = new WebSocket('ws://localhost:1234');

    ws.addEventListener('message', event => {
      messages.value.push(event.data);
    });

    onMounted(() => {
      ws.addEventListener('open', () => {
        ws.send('Hello, WebSocket!');
      });
    });

    return {
      messages,
    };
  },
};
</script>

在上面的例子中，我们创建了一个WebSocket对象并通过ref将消息存储在messages数组中。我们还使用onMounted钩子将打开WebSocket连接时发送的消息添加到此连接中。