VUE3使用 websocket

Vue3可以使用WebSocket进行实时通信。下面是一个简单的示例：

首先，安装`vue-native-websocket`库：

npm install vue-native-websocket

然后，在你的Vue3项目中创建一个WebSocket服务：

import { createApp } from 'vue'
import App from './App.vue'
import VueNativeSock from 'vue-native-websocket'

const app = createApp(App)

// 配置WebSocket连接
app.use(VueNativeSock, 'ws://localhost:8080', {
  reconnection: true,
  reconnectionDelay: 3000,
})

app.mount('#app')

在上面的代码中，我们将WebSocket连接配置为`ws://localhost:8080`，并启用了自动重连。

接下来，在Vue组件中使用WebSocket：

export default {
  mounted() {
    // 监听WebSocket事件
    this.$socket.onmessage = (message) => {
      console.log(message.data)
    }

    // 向服务器发送消息
    this.$socket.send('Hello, server!')
  },

  methods: {
    sendMessage() {
      // 向服务器发送消息
      this.$socket.send('Hello, server!')
    }
  }
}

在上面的代码中，我们使用`this.$socket`来访问WebSocket对象，并监听`onmessage`事件来接收服务器发送的消息。还可以使用`this.$socket.send()`方法向服务器发送消息。

这就是使用WebSocket进行实时通信的基本步骤。你可以根据具体需求来扩展功能。