ReconnectingWebSocket 在vue项目中使用步骤

首先，安装reconnecting-websocket库。

npm i reconnecting-websocket

1. 在需要使用ReconnectingWebSocket的Vue组件中引入

import ReconnectingWebSocket from 'reconnecting-websocket';

1. 在Vue组件的created或mounted钩子函数中，创建并配置ReconnectingWebSocket实例

created() {
  this.websocket = new ReconnectingWebSocket('ws://example.com/socket');
  
  // 配置WebSocket事件处理程序
  this.websocket.onopen = this.onWebSocketOpen;
  this.websocket.onmessage = this.onWebSocketMessage;
  this.websocket.onerror = this.onWebSocketError;
  this.websocket.onclose = this.onWebSocketClose;
},

methods: {
  onWebSocketOpen() {
    console.log('WebSocket连接已打开');
    // 在连接打开时执行的操作
  },
  
  onWebSocketMessage(event) {
    console.log('收到WebSocket消息:', event.data);
    // 处理收到的消息
  },
  
  onWebSocketError(event) {
    console.error('WebSocket错误:', event.error);
    // 处理错误
  },
  
  onWebSocketClose(event) {
    console.log('WebSocket连接已关闭:', event.code, event.reason);
    // 在连接关闭时执行的操作
  },
},

根据实际情况修改new ReconnectingWebSocket('ws://example.com/socket')中的WebSocket服务器URL。然后，根据需要配置WebSocket事件处理程序。

1. 发送和接收消息。通过ReconnectingWebSocket实例的send方法发送消息，例如：

this.websocket.send('Hello, server!');

接收到的消息将通过onWebSocketMessage方法处理。

记得在组件销毁时，关闭WebSocket连接，例如在Vue组件的beforeDestroy钩子函数中调用this.websocket.close()关闭WebSocket连接。