vue3中使用websocket

在Vue 3中使用WebSocket可以通过创建一个WebSocket实例并在组件的setup函数中管理它来实现。以下是一个简单的例子：

<template>
  <div>
    <button @click="connect">Connect</button>
    <button @click="sendMessage" :disabled="!socket.readyState">Send</button>
    <button @click="disconnect" :disabled="!socket.readyState">Disconnect</button>
    <div>
      Status: {{ socket.readyState }}
    </div>
    <div>
      Messages:
      <ul>
        <li v-for="message in messages" :key="message">{{ message }}</li>
      </ul>
    </div>
  </div>
</template>
 
<script>
import { ref } from 'vue';
 
export default {
  setup() {
    const socket = ref(null);
    const messages = ref([]);
 
    function connect() {
      socket.value = new WebSocket('wss://your-websocket-server');
 
      socket.value.onopen = function(event) {
        console.log('WebSocket connected: ', event);
      };
 
      socket.value.onerror = function(error) {
        console.error('WebSocket error: ', error);
      };
 
      socket.value.onmessage = function(event) {
        messages.value.push(event.data);
      };
 
      socket.value.onclose = function() {
        console.log('WebSocket disconnected');
      };
    }
 
    function sendMessage() {
      if (socket.value && socket.value.readyState === WebSocket.OPEN) {
        socket.value.send('Your message here');
      }
    }
 
    function disconnect() {
      if (socket.value) {
        socket.value.close();
        socket.value = null;
      }
    }
 
    return {
      socket,
      messages,
      connect,
      sendMessage,
      disconnect
    };
  }
};
</script>

在这个例子中，我们创建了一个WebSocket连接，并在组件的setup函数中定义了连接、发送消息和断开连接的方法。我们还监听了WebSocket的打开、错误、接收消息和关闭事件，并将它们与Vue响应式数据（messages数组和socket实例）相关联。

请确保将'wss://your-websocket-server'替换为您的WebSocket服务器地址。此外，这里的WebSocket URL使用的是wss协议，如果您的服务器支持ws（非加密的WebSocket），您也可以使用'ws://your-websocket-server'。