如何处理WebSocket的断线重连

处理WebSocket的断线重连可以通过以下几个步骤实现：

1. 监听WebSocket的连接状态：在WebSocket对象上添加onopen、onmessage、onerror和onclose事件监听器，以便在连接状态发生变化时执行相应的操作。

const socket = new WebSocket('ws://example.com');

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

socket.onmessage = (event) => {
  console.log('收到消息:', event.data);
};

socket.onerror = (error) => {
  console.error('WebSocket错误:', error);
};

socket.onclose = (event) => {
  console.log('WebSocket连接已关闭，关闭码:', event.code);
};

2. 实现断线重连逻辑：在onclose事件回调中，检查关闭码以确定是否需要重连。如果需要重连，可以使用setTimeout设置一个延迟后尝试重新连接。

const reconnectInterval = 3000; // 重连间隔时间，单位：毫秒

socket.onclose = (event) => {
  console.log('WebSocket连接已关闭，关闭码:', event.code);

  if (event.code !== 1000) { // 如果关闭码不是正常关闭（1000），则尝试重连
    setTimeout(() => {
      console.log('尝试重连...');
      socket = new WebSocket('ws://example.com');

      // 重新添加事件监听器
      socket.onopen = () => {
        console.log('WebSocket连接已重新建立');
      };

      socket.onmessage = (event) => {
        console.log('收到消息:', event.data);
      };

      socket.onerror = (error) => {
        console.error('WebSocket错误:', error);
      };

      socket.onclose = (event) => {
        console.log('WebSocket连接已关闭，关闭码:', event.code);
        setTimeout(() => {
          console.log('尝试重连...');
          socket = new WebSocket('ws://example.com');
          // 重新添加事件监听器
        }, reconnectInterval);
      };
    }, reconnectInterval);
  }
};

这样，在WebSocket连接断开时，程序会按照设定的时间间隔尝试重新连接。请注意，这个示例仅适用于浏览器环境，如果你需要在Node.js环境中实现类似的功能，可以使用ws库。