vue3中实现websocket

在 Vue3 中实现 WebSocket 功能，你可以使用官方推荐的 `vue-websocket` 这个库，它简化了在 Vue 应用中处理实时通信的过程。以下是基本步骤：

1. **安装依赖**:
首先需要在你的项目中安装 `vue-websocket`，可以使用 npm 或者 yarn：

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

2. **引入并配置**:
在主入口文件（通常是 `main.js`）中导入，并在Vue原型上挂载：

   import { createWebsocket } from 'vue-websocket';
   
   Vue.prototype.$websocket = createWebsocket('ws://your-websocket-url');

确保将 `'ws://your-websocket-url'` 替换为你实际的WebSocket服务器地址。

3. **监听连接和消息**:
在组件里，你可以监听 `$websocket` 的事件来响应连接状态和接收到的消息：

   export default {
     mounted() {
       this.$websocket.on('open', () => {
         console.log('WebSocket已连接');
       });
       
       this.$websocket.on('message', (data) => {
         console.log('Received message:', data);
         // 在这里处理接收到的数据
       });
       
       this.$websocket.on('close', () => {
         console.log('WebSocket关闭');
       });
       
       // 错误处理
       this.$websocket.onError((error) => {
         console.error('WebSocket错误:', error);
       });
     },
     beforeDestroy() {
       // 关闭连接
       this.$websocket.close();
     }
   };

4. **发送数据**:
使用 `.send()` 方法向服务器发送数据：

   this.$websocket.send('Hello Server!');