vue3如何使用WebSocket连接

在Vue3中使用WebSocket连接通常会涉及以下步骤：

1. **安装依赖**：首先，确保已经在项目中安装了`vue-websocket`库，可以使用npm或yarn进行安装：

   npm install vue-websocket
   # 或者
   yarn add vue-websocket

2. **导入并配置**：在main.js或者单文件组件中导入`VueSocket.io`插件，并在Vue实例的原型链上注册它：

   import VueSocketio from 'vue-websocket'
   Vue.use(VueSocketio, {
     url: '你的WebSocket服务器地址', // 这里填写实际的WebSocket连接地址
   })

3. **使用连接**：在需要接收或发送消息的地方，可以创建一个实例并与WebSocket建立连接：

   export default {
     data() {
       return {
         message: '',
         connected: false,
       }
     },
     mounted() {
       this.$socket.on('connect', () => {
         this.connected = true;
         console.log('Connected to WebSocket');
       });
     },
     methods: {
       sendMessage() {
         if (this.connected) {
           this.$socket.emit('message', { text: this.message });
           this.message = '';
         }
       },
     },
   }

4. **处理事件**：监听WebSocket发送的事件，比如`message`，并在相应的回调函数中处理接收到的消息：

   created() {
     this.$socket.on('message', (data) => {
       console.log('Received:', data);
       // 在这里处理接收到的数据
     });
   }