什么是 Server-sent Events
Server-sent Events 是一种 HTTP 协议的扩展，也称为 EventSource。它允许浏览器通过长连接获取服务器端的实时数据更新，而无需使用 Ajax 轮询。
Server-sent Events 基于 HTTP/1.1 协议，遵循“事件流”模型。客户端发起一个 GET 请求，服务器将响应打开一个连接，发送以“事件”为基础的数据流，并推送到客户端。
在许多实时应用程序中，Server-sent Events 更加优越于轮询和 WebSocket，因为它具有轻量而又强大、易于使用和实现、允许异步推送和实时数据更新等优势。
但是，使用 Server-sent Events 时，开发者经常会遇到 HTTP 重试问题。
HTTP 重试问题
HTTP 客户端默认在断开连接时会自动发起 HTTP 重试。这意味着当您的长连接断开时，浏览器会自动发起新的连接尝试。这可能会导致重复的数据推送和数据库的过度请求，从而消耗更多的带宽和资源。
针对这个问题，我们需要在服务端设置连接保持时间，以便让客户端知道何时应该关闭连接。但是，即使我们使用了这个方法，仍然存在 Server-sent Events 断开连接的情况。
解决方法
方法一：使用 Ping 消息
为了避免 Server-sent Events 连接在传输中间断开，可以通过向客户端发送一个 Ping 消息来维持连接。
具体而言，服务器会定期发送一个类似“:\n\n”的消息给客户端，告诉客户端连接是处于活动状态的。
下面是示例代码：
function keepAlive() {
setInterval(function() {
const xhr = new XMLHttpRequest();
xhr.open('GET', 'ping', true);
xhr.send();
}, 20000);
};方法二：捕获错误并重新连接
我们也可以在客户端捕获错误并重新连接，以实现重连的目的。
具体而言，我们可以在 EventSource 对象的 onerror 事件中重新建立连接。
下面是示例代码：
-- -------------------- ---- -------
--- ------ - --- ---------------------------
-------------- - ----------- -
-- ---------------- -- ----------------------- -
-------------------------------
- ---- -
------------------ ------------
-
-------------
---------------
-总结
Server-sent Events 是一种非常强大并且易于使用的技术，可以使我们的应用程序更加实时和动态。然而，当我们面对 HTTP 重试问题时，我们需要使用像 Ping 消息或重新连接这样的技术来解决这些问题。
无论是哪种方法，我们需要更加仔细地考虑 Server-sent Events 的使用情况，从而使我们的应用程序在更充分的条件下发挥其动态性和实时性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645d8558968c7c53b0ff6f65