Vue.js WebSocket 实战指南：连接、发送和接收消息

要在 Vue 项目中使用 WebSocket，你需要安装并引入 WebSocket 库。可以使用npm或yarn来安装 WebSocket 库，例如npm install --save vue-native-websocket。

在 Vue 项目中，你可以在main.js文件中引入 WebSocket 库，并将其作为 Vue 插件使用。示例代码如下：

import VueNativeSock from 'vue-native-websocket';

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

在上述代码中，'wss://example.com'是你要连接的 WebSocket 服务器的 URL。你还可以设置一些其他选项，如数据格式、重新连接选项等。

在 Vue 组件中，你可以通过this.$socket来访问 WebSocket 连接。示例代码如下：

export default {
  mounted() {
    this.$socket.send('Hello WebSocket!');
  },
  created() {
    this.$options.sockets.onmessage = (event) => {
      console.log(event.data);
    };
  },
};

在上述代码中，this.$socket.send('Hello WebSocket!')用于发送消息到 WebSocket 服务器。this.$options.sockets.onmessage用于监听 WebSocket 服务器发送的消息。

以上是使用 Vue 和 WebSocket 库在 Vue 项目中实现 WebSocket 的基本步骤。你可以根据自己的需要进行进一步的定制和开发。