SSE 连接中断或关闭时如何自动重连
前言
在开发 web 应用程序时，我们经常需要在客户端使用实时通信。常见的实时通信技术如 WebSocket，SSE；本文将围绕 SSE 进行讨论，讨论 SSE 连接中断或关闭时，如何实现自动重连。
什么是 SSE
SSE（Server-Sent Events）技术是一种基于 HTTP 的服务器推送技术。与 WebSocket 不同，SSE 在建立连接后，在服务器端去主动推送信息。
SSE 可以实现一个浏览器与服务器之间的持久连接，并且可以允许服务器向客户端推送消息。服务器通过向客户端发送数据流（text/event-stream 格式），客户端利用浏览器特定的 API 或 JavaScript 得到数据流并作出响应。
一个简单的 SSE 示例代码：
-- -------------------- ---- -------
----- ----------- - --- -------------------------- -- ----
--------------------- - --------------- - -- ----
------------------------
--
------------------- - --------------- - -- ----
-- ----------------- -- ------------------- -
----------------------- ---------
-
-SSE 连接中断或关闭时的问题
在实际使用中，由于种种原因，SSE 连接可能会中断或关闭，例如网络故障、服务器重启等。连接关闭后，客户端应该如何处理？
一种很简单的处理方式是：当检测到连接关闭后，直接调用 eventSource.close() 关闭连接，然后重新创建一个新的 SSE 连接。代码如下：
eventSource.onerror = function(event) { // 错误处理
if (event.readyState == EventSource.CLOSED) {
console.log("Connection closed");
eventSource.close();
eventSource = new EventSource("server-url");
}
}但是这种方式有一个缺点：无法保证在连接关闭的瞬间接收到的数据不会丢失。比如在 eventSource.close() 和 new EventSource("server-url") 之间的时间差，就有可能导致数据丢失。
自动重连
为了保证数据不丢失，我们需要实现 SSE 连接自动重连的机制。其实实现自动重连也很简单，我们可以通过 window.setTimeout() 在一定的间隔时间后重新建立 SSE 连接。
eventSource.onerror = function(event) { // 错误处理
if (event.readyState == EventSource.CLOSED) {
console.log("Connection closed");
setTimeout(() => {
eventSource = new EventSource("server-url");
}, 1000); // 每隔 1 秒重新连接
}
}上面代码中，如果连接关闭，就在 1 秒后重新连接。这里的时间间隔可以根据实际情况调整。
需要注意的是，如果 SSE 连接一直重连不成功，可能会导致客户端一直处于自动重连的状态。因此应该设置一个最大重连次数，如果超过最大重连次数还没有连接成功，则应该显示连接失败的错误信息。
-- -------------------- ---- -------
--- ---------- - --
----- ------------- - ---
-------- --------- -
--------------------- - --------------- -
------------------------
---------- - -- -- ---------------- -
--
------------------- - --------------- -
-- ----------------- -- ------------------- -
-- ----------- -- -------------- -
----------------------- ------- ------- ----- ----- ----------- -- -------------
- ---- -
----------------------- ------- --------------
-------------
------------------- ------ -- ----
-
-
--
------------------------------------ --------------- - -- ----
----------------------------------
---
-
----------上面代码中，我们增加了一个 retryCount 变量，用于记录重连的次数。当连接关闭后，如果重连次数超过了 maxRetryCount，就显示连接失败的错误信息。否则就在 1 秒后重新连接。同时还加上了心跳检测，保证连接不被服务器端关闭。
总结
本文介绍了如何让 SSE 连接自动重连，从中解决连接断开造成的数据丢失问题。这对于实时通信类的应用程序具有重要的指导意义，让我们能够更好地处理连接问题，提高用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c5a83fd20074f47a47b419