vue3 websocket实现列表 实时更新

在 Vue3 中利用 WebSocket 实现列表实时更新，你可以按照以下步骤操作：

1. **引入依赖**：首先需要安装 Vue 的官方提供的 `vue-websocket` 插件，通过 npm 或 yarn 安装：

   npm install vue-websocket

2. **创建实例**：在你的组件或者 main.js 中，初始化一个 VueWebsocket 实例，并连接到WebSocket服务器：

   import { createSocket } from 'vue-websocket';
   
   const socket = createSocket('ws://your-websocket-url');

3. **监听事件**：在组件的 mounted 阶段，监听服务器推送的数据：

   export default {
     setup() {
       socket.on('message', (data) => {
         // 数据格式化并处理
         const newData = JSON.parse(data);
         this.updateList(newData); // 更新你的数据数组
       });
     },
     methods: {
       updateList(newData) {
         this.list.push(...newData); // 如果是数组数据，直接合并
         // 或者根据具体情况更新单个元素
       }
     }
   };

4. **发送请求**：如果需要向服务器发送数据，可以使用 `socket.send()` 方法：

   sendForm() {
     socket.send(JSON.stringify(this.formData));
   }

5. **错误处理**：别忘了添加错误处理，以便在连接失败或其他异常时给出提示：

   socket.on('error', (error) => {
     console.error('WebSocket error:', error);
   });

6. **销毁连接**：在组件卸载之前，记得关闭连接：

   beforeDestroy() {
     socket.close();
   }