vue 前端 使用 WebSocke

要在Vue前端使用WebSocket，可以使用Vue提供的WebSocket库，例如 `vue-native-websocket` 或 `vue-socket.io`。

以下是使用 `vue-native-websocket` 实现WebSocket的简单步骤：

1. 安装 `vue-native-websocket`：

npm install vue-native-websocket --save

2. 在Vue应用程序的入口文件中，导入并使用 `vue-native-websocket`：

import VueNativeSock from 'vue-native-websocket'

Vue.use(VueNativeSock, 'ws://example.com', {
  reconnection: true,
  reconnectionAttempts: 5,
  reconnectionDelay: 3000,
})

这里的 `'ws://example.com'` 是你要连接的WebSocket服务器的URL。

3. 在Vue组件中，可以使用 `$socket` 对象来发送和接收WebSocket消息。例如：

export default {
  mounted () {
    this.$socket.send('Hello, WebSocket!')
  },
  methods: {
    handleMessage (message) {
      console.log('Received message:', message)
    }
  },
  sockets: {
    message: 'handleMessage'
  }
}

这里的 `message` 是我们要监听的WebSocket事件，`handleMessage` 是事件处理程序。

注意：在使用WebSocket时，需要确保你的服务器支持WebSocket协议。