在开发 Web 应用程序时，SSE（Server-Sent Events）是与服务器进行双向通信的一种流行方法。SSE 允许服务器端向客户端推送实时数据，而无需客户端发起请求。但是，由于网络问题或其他问题，连接可能会断开。此时就需要自动重连来保持数据的实时性。本文将介绍如何实现 SSE 断开连接后自动重连的方法。
为何需要自动重连？
在使用 SSE 时，当客户端与服务器建立连接后，服务器 将按一定时间间隔向客户端推送新的数据。客户端收到新的数据后，就可以在网页上实时展示数据。但是，由于网络问题、服务器故障或其他原因，连接可能会断开。在这种情况下，如果客户端无法自动重连，就会导致数据的延迟或者不完整，这会给用户带来不好的体验。
自动重连的实现方法
方法一：使用重试机制
在建立 SSE 连接时，可以设置一个 retry 值，该值表示客户端在断开后等待多长时间后进行下一次连接尝试。在断开连接时，客户端会根据该值自动重试连接。
以下是在客户端使用 JavaScript 进行 SSE 连接，同时设置 retry 为 1000 毫秒的示例代码：
const source = new EventSource('sse.php?retry=1000');
source.onmessage = (e) => {
console.log(e.data);
};
source.onerror = (e) => {
console.log('连接出错，正在重试...');
};当连接断开后，客户端会调用 onerror 事件处理器。在该事件处理器中，可以执行一些重试操作，例如重新建立连接。
// javascriptcn.com 代码示例
source.onerror = (e) => {
console.log('连接出错，正在重试...');
setTimeout(() => {
source = new EventSource('sse.php?retry=1000');
source.onmessage = (e) => {
console.log(e.data);
};
}, 1000);
};方法二：使用自定义事件
在客户端发送 SSE 请求后，服务器端能够将连接情况作为数据返回给客户端。当连接断开时，服务器端会将一个名为 "close" 的自定义事件发送给客户端。此时，客户端可以监听该自定义事件，当接收到 "close" 事件时，就可以自动重连。
以下是在客户端使用 JavaScript 进行 SSE 连接，并监听自定义事件 close 的示例代码：
// javascriptcn.com 代码示例
const source = new EventSource('sse.php');
source.onmessage = (e) => {
console.log(e.data);
};
source.addEventListener('close', () => {
console.log('连接断开，正在重试...');
source.close();
setTimeout(() => {
source = new EventSource('sse.php');
source.onmessage = (e) => {
console.log(e.data);
};
}, 1000);
});在上述代码中，当客户端接收到 "close" 自定义事件时，先调用 source.close() 方法关闭当前连接，然后在一个 1 秒的延迟之后重新创建一个 SSE 连接。
总结
SSE 是一种非常有效的实时通信方式，但是在使用 SSE 连接时，无法避免连接断开的情况。为了保证数据的实时性，需要使用自动重连机制。本文介绍了两种常用的自动重连实现方法，即使用重试机制和使用自定义事件。无论使用哪种方法，都可以通过监听连接断开事件来实现自动重连功能。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/654c557a7d4982a6eb5e5c0c