在前端的开发中，我们经常需要与后端进行实时通信，即时通知客户端的变化。其中一个实现方式是使用 Server-sent Events（SSE），这是用于实现服务器向客户端推送事件的全新机制，它支持即时性的单向通信，不需要客户端轮询，大大减轻了服务器的负担。
但是，在一些特定情况下，SSE 可能会因为某些原因中断连接，如网络连接问题、服务器停机等等，这样就需要重新建立连接，本文将详细介绍如何在 Server-sent Events 中断后重新建立连接的方法。
监听 SSE 中断事件
首先，我们需要在客户端代码中监听 SSE 的中断事件，以便及时检测到连接是否中断。在 JavaScript 中，我们可以使用 EventSource 对象来实现 SSE 的连接和事件监听。
-- -------------------- ---- ------- --- ----------- - --- ----------------------------- ------------------ - -------- -- - ----------------------- ---------- -- ------------------- - -------- -- - ----------------------- --------- -- --------------------- - -------- ------- - --------------------- ------ -- ------------ --
其中，EventSource 对象的 onopen 方法用于监听 SSE 的连接建立事件，onerror 方法用于监听 SSE 的中断事件，onmessage 方法用于监听 SSE 推送的事件。
重新建立连接
当 SSE 的连接断开时，我们需要重新建立连接。在此之前，我们需要将已建立的连接关闭，然后重新创建一个新的 EventSource 对象来连接服务器，代码如下：
eventSource.onerror = function () {
setTimeout(() => {
eventSource.close();
eventSource = new EventSource('/event-stream');
}, 2000);
};上述代码中，我们通过 setTimeout 函数来控制重新连接的时间间隔，以免频繁地进行连接操作。在 setTimeout 中，我们先关闭已有的连接，然后重新创建一个新的连接对象。
重连次数限制
在实际开发中，我们不希望 SSE 连接中断后一直在频繁地尝试重新连接，这样会浪费不必要的资源。因此，我们可以设置一个重连次数限制，达到重连次数后停止尝试重新连接，代码如下：
-- -------------------- ---- -------
--- ------------------- - --
--- -------------- - --
------------------- - -------- -- -
-- --------------- - -------------------- -
------------- -- -
--------------------
----------- - --- -----------------------------
-----------------
-- ------
-
--在上述代码中，我们设置了 MAX_RECONNECT_TIMES 变量来表示最大重连次数，并利用 reconnectTimes 变量来计数当前已尝试的重连次数，达到最大重连次数后停止尝试重新连接。
总结
通过以上方法，我们可以实现 Server-sent Events 中断后的重新连接。在具体应用中，我们可以根据需要设定重连间隔时间和最大重连次数等参数，以达到更好的用户体验和节约资源的目的。
完整代码如下：
-- -------------------- ---- -------
--- ------------------- - --
--- -------------- - --
--- ----------- - --- -----------------------------
------------------ - -------- -- -
----------------------- ----------
-------------- - --
--
------------------- - -------- -- -
-- --------------- - -------------------- -
------------- -- -
--------------------
----------- - --- -----------------------------
-----------------
-- ------
-
--
--------------------- - -------- ------- -
--------------------- ------ -- ------------
--来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/658ff2a1eb4cecbf2d57faf0