Server-sent Events 中断后如何重新建立连接

在前端的开发中，我们经常需要与后端进行实时通信，即时通知客户端的变化。其中一个实现方式是使用 Server-sent Events（SSE），这是用于实现服务器向客户端推送事件的全新机制，它支持即时性的单向通信，不需要客户端轮询，大大减轻了服务器的负担。

但是，在一些特定情况下，SSE 可能会因为某些原因中断连接，如网络连接问题、服务器停机等等，这样就需要重新建立连接，本文将详细介绍如何在 Server-sent Events 中断后重新建立连接的方法。

监听 SSE 中断事件

首先，我们需要在客户端代码中监听 SSE 的中断事件，以便及时检测到连接是否中断。在 JavaScript 中，我们可以使用 EventSource 对象来实现 SSE 的连接和事件监听。

let eventSource = new EventSource('/event-stream');

eventSource.onopen = function () {
  console.log('Connection opened.');
};

eventSource.onerror = function () {
  console.log('Connection error.');
};

eventSource.onmessage = function (event) {
  console.log('Received event: ', event.data);
};

其中，EventSource 对象的 onopen 方法用于监听 SSE 的连接建立事件，onerror 方法用于监听 SSE 的中断事件，onmessage 方法用于监听 SSE 推送的事件。

重新建立连接

当 SSE 的连接断开时，我们需要重新建立连接。在此之前，我们需要将已建立的连接关闭，然后重新创建一个新的 EventSource 对象来连接服务器，代码如下：

eventSource.onerror = function () {
  setTimeout(() => {
    eventSource.close();
    eventSource = new EventSource('/event-stream');
  }, 2000);
};

上述代码中，我们通过 setTimeout 函数来控制重新连接的时间间隔，以免频繁地进行连接操作。在 setTimeout 中，我们先关闭已有的连接，然后重新创建一个新的连接对象。

重连次数限制

在实际开发中，我们不希望 SSE 连接中断后一直在频繁地尝试重新连接，这样会浪费不必要的资源。因此，我们可以设置一个重连次数限制，达到重连次数后停止尝试重新连接，代码如下：

let MAX_RECONNECT_TIMES = 3;
let reconnectTimes = 0;

eventSource.onerror = function () {
  if (reconnectTimes < MAX_RECONNECT_TIMES) {
    setTimeout(() => {
      eventSource.close();
      eventSource = new EventSource('/event-stream');
      reconnectTimes++;
    }, 2000);
  }
};

在上述代码中，我们设置了 MAX_RECONNECT_TIMES 变量来表示最大重连次数，并利用 reconnectTimes 变量来计数当前已尝试的重连次数，达到最大重连次数后停止尝试重新连接。

总结

通过以上方法，我们可以实现 Server-sent Events 中断后的重新连接。在具体应用中，我们可以根据需要设定重连间隔时间和最大重连次数等参数，以达到更好的用户体验和节约资源的目的。

完整代码如下：

let MAX_RECONNECT_TIMES = 3;
let reconnectTimes = 0;
let eventSource = new EventSource('/event-stream');

eventSource.onopen = function () {
  console.log('Connection opened.');
  reconnectTimes = 0;
};

eventSource.onerror = function () {
  if (reconnectTimes < MAX_RECONNECT_TIMES) {
    setTimeout(() => {
      eventSource.close();
      eventSource = new EventSource('/event-stream');
      reconnectTimes++;
    }, 2000);
  }
};

eventSource.onmessage = function (event) {
  console.log('Received event: ', event.data);
};

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/658ff2a1eb4cecbf2d57faf0