vue-native-websocket-vue3 怎么使用

Vue-Native-WebSocket-Vue3是一个用于Vue 3应用的轻量级Websocket库，它允许你在Vue组件中方便地处理实时通信。以下是使用它的基本步骤：

1. **安装**:
使用npm或yarn安装：

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

2. **引入并配置**:
在`main.js`或其他入口文件中引入，并在Vue原型上挂载插件：

   import { createNativeWebSocket } from 'vue-native-websocket-vue3'
   Vue.use(createNativeWebSocket, {
     url: 'your-ws-server-url', // 替换为你实际的WebSocket服务器地址
   })

3. **在组件中使用**:
在需要使用Websocket的地方，你可以创建一个名为`ws`的实例：

   export default {
     setup() {
       const ws = ref(null);
       onMounted(() => {
         ws.value = createNativeWebSocket();
         ws.value.connect();
       });
       onUnmounted(() => {
         ws.value.disconnect();
       });
       return { ws };
     },
     methods: {
       sendMessage(message) {
         ws.value.send(message);
       }
     }
   }

然后可以在组件内的`methods`中调用`sendMessage`发送消息。

4. **监听事件**:
通过`.on`方法监听接收到的消息或连接状态变化：

   ws.value.on('message', (data) => console.log(data));
   ws.value.on('open', () => console.log('Connected'));
   ws.value.on('close', () => console.log('Disconnected'));