Server-sent Events（SSE）是一种基于 HTTP 协议的服务器推送技术，它能够在服务器端向客户端推送实时数据，而无需客户端发起请求。SSE 在前端实时数据推送中发挥着重要作用，但是如何保证 SSE 的稳定可靠却是一个需要解决的问题。
本文将详细介绍如何通过以下几个方面来保证 SSE 的稳定可靠：
- 服务器端配置
- 客户端实现
- 错误处理
- 重连机制
服务器端配置
在服务器端，配置 SSE 的响应头非常重要。以下是一些常用的响应头：
Content-Type: text/event-stream Cache-Control: no-cache Connection: keep-alive
其中，Content-Type 告诉客户端响应的数据格式为 text/event-stream，Cache-Control 禁用缓存，Connection 设置为 keep-alive，保持长连接。
在 Node.js 中，可以使用 express 框架来实现 SSE 的服务器端代码：
-- -------------------- ---- -------
----- ------- - -------------------
----- --- - ----------
--------------- ----- ---- -- -
---------
--------------- --------------------
---------------- -----------
------------- ------------
---
-------------- -- -
---------------- ----- ----------------------------
-- ------
---上述代码创建了一个 /sse 路由，通过 setInterval 每秒向客户端推送当前时间。
客户端实现
在客户端，可以使用 EventSource 对象来订阅 SSE 事件。以下是一个简单的例子：
const eventSource = new EventSource('/sse');
eventSource.onmessage = (event) => {
console.log(event.data);
};上述代码创建了一个 EventSource 对象，并通过 onmessage 方法监听数据推送事件。每次接收到数据，都会在控制台输出。
错误处理
在 SSE 连接过程中，可能会出现网络中断、服务器重启等异常情况。为了保证 SSE 的稳定可靠，需要对这些异常情况进行处理。
在客户端，可以监听 error 事件来处理异常情况：
eventSource.onerror = (event) => {
console.error('SSE error:', event);
};在服务器端，需要通过 res.socket 对象来监听连接异常：
req.socket.on('error', (err) => {
console.error('SSE error:', err);
});重连机制
当 SSE 连接断开后，需要重新连接，以保证实时数据的推送。为了实现重连机制，可以在客户端监听 close 事件，在事件回调函数中发起新的连接：
-- -------------------- ---- -------
------------------- - -- -- -
----------------- ---------- ------- --------------
------------- -- -
----- -------------- - --- --------------------
------------------------ - ----------------------
---------------------- - --------------------
---------------------- - --------------------
-- ------
--上述代码在连接关闭后，等待 3 秒钟后重新发起连接，并将之前的事件监听函数绑定到新的 EventSource 对象上。
总结
本文介绍了如何通过服务器端配置、客户端实现、错误处理和重连机制来保证 SSE 的稳定可靠。在实际开发中，可以根据需求进行调整和优化，以满足不同的业务场景。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65f88879d10417a22244cf6c