vue连接websocket

// 引入 Vue
import Vue from 'vue';

// 创建一个 Vue 插件来管理 WebSocket 连接
Vue.prototype.$WebSocket = class WebSocketPlugin {
  constructor(url) {
    this.url = url;
    this.socket = null;
    this.connect();
  }

  // 建立 WebSocket 连接
  connect() {
    this.socket = new WebSocket(this.url);

    // 监听连接打开事件
    this.socket.onopen = (event) => {
      console.log('WebSocket connection opened:', event);
    };

    // 监听消息接收事件
    this.socket.onmessage = (event) => {
      console.log('Message received:', event.data);
      // 在这里处理接收到的消息
    };

    // 监听连接关闭事件
    this.socket.onclose = (event) => {
      console.log('WebSocket connection closed:', event);
      // 可以在这里尝试重新连接
      this.reconnect();
    };

    // 监听错误事件
    this.socket.onerror = (error) => {
      console.error('WebSocket error:', error);
    };
  }

  // 发送消息
  send(message) {
    if (this.socket && this.socket.readyState === WebSocket.OPEN) {
      this.socket.send(message);
    } else {
      console.error('WebSocket is not open: Ready state is', this.socket.readyState);
    }
  }

  // 尝试重新连接
  reconnect() {
    setTimeout(() => {
      this.connect();
    }, 5000); // 5秒后重试连接
  }

  // 关闭连接
  close() {
    if (this.socket) {
      this.socket.close();
    }
  }
};

// 在 Vue 实例中使用 WebSocket 插件
new Vue({
  el: '#app',
  data() {
    return {
      message: ''
    };
  },
  methods: {
    sendMessage() {
      this.$WebSocket.send(this.message);
      this.message = '';
    }
  },
  created() {
    // 初始化 WebSocket 连接
    this.$WebSocket = new this.$WebSocket('ws://your-websocket-url-here');
  },
  destroyed() {
    // 销毁时关闭 WebSocket 连接
    this.$WebSocket.close();
  }
});

解释说明：

1. 引入 Vue：首先确保你已经安装并引入了 Vue。

2. 创建 WebSocket 插件：我们创建了一个名为 WebSocketPlugin 的类，用于管理 WebSocket 连接。这个类包含了连接、发送消息、重新连接和关闭连接的方法。

3. 建立 WebSocket 连接：在 connect 方法中，我们使用 new WebSocket(this.url) 来建立连接，并监听连接的打开、消息接收、关闭和错误事件。

4. 发送消息：send 方法用于发送消息到 WebSocket 服务器。只有当 WebSocket 处于打开状态时才会发送消息。

5. 重新连接：reconnect 方法会在连接关闭时尝试重新连接，这里设置为 5 秒后重试。

6. 关闭连接：close 方法用于关闭 WebSocket 连接。

7. 在 Vue 实例中使用 WebSocket 插件：我们在 Vue 实例的 created 钩子中初始化 WebSocket 连接，并在 destroyed 钩子中关闭连接。同时，提供了一个 sendMessage 方法用于发送消息。

请根据你的实际需求修改 WebSocket URL 和其他逻辑。