首页 > 文章 > 前端

JSWebSocket自动重连实现方法详解

时间：2025-07-01 10:29:09 231浏览收藏

积累知识，胜过积蓄金银！毕竟在文章开发的过程中，会遇到各种各样的问题，往往都是一些细节知识点还没有掌握好而导致的，因此基础知识点的积累是很重要的。下面本文《JS实现WebSocket自动重连机制详解》，就带大家讲解一下知识点，若是你对本文感兴趣，或者是想搞懂其中某个知识点，就请你继续往下看吧~

WebSocket重连机制通过监听onclose事件、设置重连策略、恢复连接状态来实现自动重连。1. 监听连接关闭事件，触发重连逻辑；2. 实现重连函数并采用指数退避等策略控制重试间隔；3. 重连成功后恢复订阅或发送心跳等操作；4. 在Node.js中使用ws库实现时需注意事件绑定方式和错误处理；5. 测试可通过断开服务器、模拟网络故障等方式进行；6. 监控则通过日志、心跳包及专用工具实现对连接状态的实时跟踪。

js如何实现websocket重连自动重连机制实现方法详解

WebSocket重连的核心在于检测连接断开，并在断开后尝试重新建立连接。关键点包括监听onclose事件、设置重连策略（例如指数退避）、以及在重连成功后处理状态。

解决方案

实现WebSocket自动重连机制，主要涉及以下几个步骤：

监听连接关闭事件： WebSocket对象的onclose事件会在连接关闭时触发。这是启动重连机制的关键。
实现重连函数： 编写一个函数来尝试重新建立WebSocket连接。这个函数应该处理连接失败的情况，并根据重连策略进行重试。
设置重连策略： 简单的重连策略是固定延迟重试。更复杂的策略是指数退避，即每次重试的延迟时间都会增加，避免在服务器压力过大时造成更大的负担。
处理重连成功后的状态： 重连成功后，需要重新订阅消息、发送状态等，恢复之前的会话状态。

下面是一个简单的JavaScript代码示例：

class AutoReconnectWebSocket {
  constructor(url, protocols = [], reconnectInterval = 1000) {
    this.url = url;
    this.protocols = protocols;
    this.reconnectInterval = reconnectInterval;
    this.ws = null;
    this.connect();
  }

  connect() {
    this.ws = new WebSocket(this.url, this.protocols);

    this.ws.onopen = () => {
      console.log("WebSocket connected");
      this.onopen && this.onopen(); // 用户自定义的 onopen
    };

    this.ws.onmessage = (event) => {
      this.onmessage && this.onmessage(event); // 用户自定义的 onmessage
    };

    this.ws.onclose = (event) => {
      console.log("WebSocket disconnected, reconnecting in " + this.reconnectInterval + "ms");
      this.onclose && this.onclose(event); // 用户自定义的 onclose
      setTimeout(() => {
        this.connect();
      }, this.reconnectInterval);
    };

    this.ws.onerror = (error) => {
      console.error("WebSocket error:", error);
      this.onerror && this.onerror(error); // 用户自定义的 onerror
    };
  }

  send(data) {
    if (this.ws && this.ws.readyState === WebSocket.OPEN) {
      this.ws.send(data);
    } else {
      console.warn("WebSocket is not open, message not sent.");
    }
  }

  close() {
    if (this.ws) {
      this.ws.close();
    }
  }
}

// 使用示例
const socket = new AutoReconnectWebSocket("ws://example.com/socket", [], 3000);

socket.onopen = () => {
  console.log("Socket opened successfully after reconnect or initial connect.");
  socket.send("Hello from client!");
};

socket.onmessage = (event) => {
  console.log("Received message:", event.data);
};

socket.onclose = (event) => {
  console.log("Socket closed. Reason:", event.code, event.reason);
};

socket.onerror = (error) => {
    console.error("Socket error occurred:", error);
};

如何设置更复杂的重连策略，例如指数退避？

指数退避的核心在于，每次重连失败后，等待的时间都会翻倍，直到达到一个最大值。这样可以避免在高并发情况下，大量客户端同时重连导致服务器压力过大。

class ExponentialBackoffWebSocket {
  constructor(url, protocols = [], initialInterval = 1000, maxInterval = 30000) {
    this.url = url;
    this.protocols = protocols;
    this.initialInterval = initialInterval;
    this.maxInterval = maxInterval;
    this.currentInterval = initialInterval;
    this.ws = null;
    this.connect();
  }

  connect() {
    this.ws = new WebSocket(this.url, this.protocols);

    this.ws.onopen = () => {
      console.log("WebSocket connected");
      this.currentInterval = this.initialInterval; // 重置间隔
      this.onopen && this.onopen();
    };

    this.ws.onmessage = (event) => {
      this.onmessage && this.onmessage(event);
    };

    this.ws.onclose = (event) => {
      console.log("WebSocket disconnected, reconnecting in " + this.currentInterval + "ms");
      this.onclose && this.onclose(event);
      setTimeout(() => {
        this.connect();
        this.currentInterval = Math.min(this.currentInterval * 2, this.maxInterval); // 指数退避
      }, this.currentInterval);
    };

    this.ws.onerror = (error) => {
      console.error("WebSocket error:", error);
      this.onerror && this.onerror(error);
    };
  }

  send(data) {
    if (this.ws && this.ws.readyState === WebSocket.OPEN) {
      this.ws.send(data);
    } else {
      console.warn("WebSocket is not open, message not sent.");
    }
  }

  close() {
    if (this.ws) {
      this.ws.close();
    }
  }
}

在这个例子中，initialInterval是初始的重连间隔，maxInterval是最大重连间隔。每次重连失败后，currentInterval都会翻倍，直到达到maxInterval。重连成功后，currentInterval会重置为initialInterval。

如何处理重连成功后的状态恢复？

重连成功后，可能需要重新订阅频道、发送心跳包、或者同步一些状态。这取决于具体的应用场景。

class StateRestoringWebSocket {
    constructor(url, protocols = [], reconnectInterval = 1000, subscriptions = []) {
        this.url = url;
        this.protocols = protocols;
        this.reconnectInterval = reconnectInterval;
        this.subscriptions = subscriptions; // 存储订阅信息
        this.ws = null;
        this.connect();
    }

    connect() {
        this.ws = new WebSocket(this.url, this.protocols);

        this.ws.onopen = () => {
            console.log("WebSocket connected");
            this.restoreSubscriptions(); // 恢复订阅
            this.onopen && this.onopen();
        };

        this.ws.onmessage = (event) => {
            this.onmessage && this.onmessage(event);
        };

        this.ws.onclose = (event) => {
            console.log("WebSocket disconnected, reconnecting in " + this.reconnectInterval + "ms");
            this.onclose && this.onclose(event);
            setTimeout(() => {
                this.connect();
            }, this.reconnectInterval);
        };

        this.ws.onerror = (error) => {
            console.error("WebSocket error:", error);
            this.onerror && this.onerror(error);
        };
    }

    send(data) {
        if (this.ws && this.ws.readyState === WebSocket.OPEN) {
            this.ws.send(data);
        } else {
            console.warn("WebSocket is not open, message not sent.");
        }
    }

    close() {
        if (this.ws) {
            this.ws.close();
        }
    }

    subscribe(channel) {
        this.subscriptions.push(channel);
        if (this.ws && this.ws.readyState === WebSocket.OPEN) {
            this.ws.send(JSON.stringify({ type: 'subscribe', channel: channel })); // 假设服务器使用JSON格式
        }
    }

    restoreSubscriptions() {
        this.subscriptions.forEach(channel => {
            this.subscribe(channel);
        });
    }
}

// 使用示例
const socket = new StateRestoringWebSocket("ws://example.com/socket", [], 3000, ['channel1', 'channel2']);

socket.onopen = () => {
    console.log("Socket opened successfully after reconnect or initial connect.");
    // socket.send("Hello from client!"); //  不再需要在 onopen 中发送初始消息
};

socket.onmessage = (event) => {
    console.log("Received message:", event.data);
};

socket.onclose = (event) => {
    console.log("Socket closed. Reason:", event.code, event.reason);
};

socket.onerror = (error) => {
    console.error("Socket error occurred:", error);
};

// 订阅新的频道
socket.subscribe('channel3');

在这个例子中，subscriptions数组存储了需要订阅的频道。restoreSubscriptions函数会在连接建立后重新订阅这些频道。subscribe函数用于添加新的订阅，并在连接建立后立即发送订阅消息。

如何在Node.js环境中实现WebSocket自动重连？

在Node.js环境中，可以使用ws或socket.io等库来实现WebSocket。自动重连的逻辑与浏览器环境类似，但需要注意一些差异，例如错误处理和进程管理。

const WebSocket = require('ws');

class AutoReconnectWebSocketNode {
    constructor(url, reconnectInterval = 1000) {
        this.url = url;
        this.reconnectInterval = reconnectInterval;
        this.ws = null;
        this.connect();
    }

    connect() {
        this.ws = new WebSocket(this.url);

        this.ws.on('open', () => {
            console.log("WebSocket connected");
            this.onopen && this.onopen();
        });

        this.ws.on('message', (message) => {
            this.onmessage && this.onmessage(message);
        });

        this.ws.on('close', () => {
            console.log("WebSocket disconnected, reconnecting in " + this.reconnectInterval + "ms");
            this.onclose && this.onclose();
            setTimeout(() => {
                this.connect();
            }, this.reconnectInterval);
        });

        this.ws.on('error', (error) => {
            console.error("WebSocket error:", error);
            this.onerror && this.onerror(error);
            //  在 Node.js 中，错误可能不会触发 close 事件，需要手动关闭连接
            this.ws.close();
        });
    }

    send(data) {
        if (this.ws && this.ws.readyState === WebSocket.OPEN) {
            this.ws.send(data);
        } else {
            console.warn("WebSocket is not open, message not sent.");
        }
    }

    close() {
        if (this.ws) {
            this.ws.close();
        }
    }
}

// 使用示例
const socket = new AutoReconnectWebSocketNode("ws://example.com/socket", 3000);

socket.onopen = () => {
    console.log("Socket opened successfully after reconnect or initial connect.");
    socket.send("Hello from server!");
};

socket.onmessage = (message) => {
    console.log("Received message:", message);
};

socket.onclose = () => {
    console.log("Socket closed.");
};

socket.onerror = (error) => {
    console.error("Socket error occurred:", error);
};

关键区别在于，Node.js中使用ws库，事件监听方式略有不同（例如，使用on('open', ...)而不是ws.onopen = ...）。此外，在Node.js环境中，需要更谨慎地处理错误，因为错误可能不会总是触发close事件。