vue封装web socket

Vue封装WebSocket通常是为了在Vue组件中复用WebSocket的连接和通信逻辑。通过创建一个单独的Vue插件或者服务，可以方便地在不同的组件之间共享WebSocket连接。下面是一个简单的封装示例，你可以根据自己的需求进行扩展和修改：

// WebSocket封装服务
class WebSocketService {
  constructor(wsUrl) {
    this.wsUrl = wsUrl;
    this.ws = null;
  }

  // 初始化WebSocket连接
  connect() {
    this.ws = new WebSocket(this.wsUrl);

    this.ws.onopen = () => {
      console.log('WebSocket连接已建立');
    };

    this.ws.onmessage = (event) => {
      console.log('收到消息:', event.data);
      // 处理接收到的消息
    };

    this.ws.onclose = () => {
      console.log('WebSocket连接已关闭');
      // 可以在这里处理连接关闭后的逻辑
    };

    this.ws.onerror = (error) => {
      console.log('WebSocket发生错误:', error);
    };
  }

  // 发送消息
  send(message) {
    if (this.ws && this.ws.readyState === WebSocket.OPEN) {
      this.ws.send(message);
    } else {
      console.log('WebSocket连接未打开');
    }
  }

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

// 创建Vue插件
const WebSocketPlugin = {
  install(Vue, options) {
    // 创建服务实例
    const wsService = new WebSocketService(options.wsUrl);

    // 暴露方法给Vue实例使用
    Vue.prototype.$websocket = {
      connect: wsService.connect.bind(wsService),
      send: wsService.send.bind(wsService),
      close: wsService.close.bind(wsService)
    };
  }
};

// 在Vue应用中使用插件
Vue.use(WebSocketPlugin, {
  wsUrl: 'ws://localhost:8080/ws' // WebSocket服务器地址
});

// 然后在Vue组件中就可以这样使用WebSocket
export default {
  mounted() {
    this.$websocket.connect();
  },
  methods: {
    sendMessage() {
      this.$websocket.send('Hello WebSocket');
    }
  },
  beforeDestroy() {
    this.$websocket.close();
  }
};

以上示例创建了一个`WebSocketService`类来处理WebSocket的连接、发送消息、接收消息和关闭连接。然后创建了一个`WebSocketPlugin`，它允许在Vue实例中通过`this.$websocket`访问这些方法。最后，在Vue组件的生命周期钩子中使用这些方法来管理WebSocket连接。