vue 建立websocket

要在Vue中建立WebSocket连接，您可以按照以下步骤进行操作：

1. 首先，安装`vue-native-websocket`插件。您可以使用npm或yarn运行以下命令进行安装：

npm install vue-native-websocket

或者

yarn add vue-native-websocket

2. 在您的Vue应用程序的入口文件（例如main.js）中导入和安装插件：

import VueNativeSock from 'vue-native-websocket';
import Vue from 'vue';

Vue.use(VueNativeSock, 'ws://localhost:8080', {
  reconnection: true, // 是否自动重新连接
  reconnectionAttempts: 5, // 重新连接尝试次数
  reconnectionDelay: 3000, // 重新连接延迟时间（ms）
});

在这个示例中，我们假设WebSocket服务器运行在`ws://localhost:8080`上。您可以根据自己的实际情况进行更改。

3. 在Vue组件中使用WebSocket连接。您可以在组件的`created`或`mounted`生命周期钩子函数中打开WebSocket连接，并在需要时处理接收到的消息。例如：

export default {
  created() {
    this.$options.sockets.onmessage = (event) => {
      // 处理接收到的消息
      console.log('Received:', event.data);
    };
  },
  methods: {
    sendMessage(message) {
      // 发送消息
      this.$socket.send(message);
    },
  },
};

在上面的示例中，我们在组件的`created`钩子函数中设置了`onmessage`事件处理程序，以处理接收到的消息。还定义了一个`sendMessage`方法，用于向服务器发送消息。

这样，您就可以在Vue应用程序中建立WebSocket连接并进行通信了。请记住，您需要根据您的服务器设置来调整WebSocket的URL和连接选项。