Server-Sent Events（SSE）是一种用于实时客户端-服务器通信的技术。它使用 HTTP 协议，但不同于传统的请求-响应式，SSE 服务器可以保持与客户端的连接开放状态，从而进行持续的即时数据推送。
通常，SSE 的优点是可以让开发者实现高效实时数据传输，避免使用轮询或者开启 WebSocket 连接的复杂性和性能问题。但是，同时也需要关注 SSE 的缓存控制和重连机制，以确保在不稳定的网络环境中数据传输的及时性和准确性。
SSE 的缓存控制
当客户端向 SSE 服务器发送请求时，服务器的响应头中会包含 Cache-Control 和 Last-Modified 等字段，用于告诉浏览器如何缓存 SSE 数据。
具体而言，Cache-Control 的值可能为：
no-store: 不缓存 SSE 数据；no-cache: 可以缓存 SSE 数据，但需要向服务端确认其是否有变化；public/private: 缓存 SSE 数据的方式，如果是public则所有客户端都可以缓存，如果是private则只有本地客户端可以缓存；max-age=n: 定义 SSE 数据的最大缓存时间，超过时间则需要向服务端确认其是否有变化。
同时，Last-Modified 用于标识 SSE 数据的最新修改时间，当客户端缓存 SSE 数据时，可以向服务端传递该时间，服务端可以比较该时间和当前 SSE 数据的修改时间，从而决定是否返回最新的 SSE 数据。示例代码如下：
-- -------------------- ---- -------
----- --- - --------------------------
----- ------ - --- -----------------
---------------- - ------- -- -
---------------- -------- ------------
--
-------------- - ----- -- -
-------------------------- --------- -----
--
------------------------------- -- -- -
---------------- ---------- ---------------
-- -------
SSE 的重连机制
SSE 的另一个需要注意的点是重连机制。由于 SSE 连接可能会因为网络不稳定、断线或其他因素中断，因此重连机制非常重要，可以让客户端尽快尝试重新建立连接，以避免出现数据传输中断的情况。
一般而言，SSE 客户端可以通过 eventsource.onclose 来监听连接断开事件，并在一定的时间间隔后尝试重新建立连接，如下所示：
-- -------------------- ---- -------
--- ------ - --- -----------------
------------- - ---------- -
------------------------ ------------
--
-------------- - ----------- -
-- ---------------- -- ----------------------- -
------------------------ ---------------
- ---- -
------------------------ ------- ---
-
--
---------------- - ----------- -
------------------------ --------- --------
--
-------------- - ---------- -
------------------------ ---------------
--------------------- -
----------
-- ------
--
-------- --------- -
------ - --- -----------------
------------- - ---------- -
------------------------ ------------
--
-------------- - ----------- -
------------------------ ------- ---
--
---------------- - ----------- -
------------------------ --------- --------
--
-------------- - ---------- -
------------------------ ---------------
--------------------- -
----------
-- ------
--
-需要注意的是，为了避免频繁尝试重新连接，在尝试建立新连接之前，可以在一定的时间间隔后再次尝试。同时，由于某些网络问题可能比较棘手，如断电、服务器关闭等，暂停时间间隔可设置为指数退避或者其他策略，以避免出现频繁无效的尝试。
总结
SSE 是一种高效的实时数据传输技术，但同时需要关注缓存控制和重连机制，以避免出现不稳定的网络环境导致的数据传输不准确或中断的问题。掌握 SSE 的缓存控制和重连机制可以提高开发效率，实现高质量的实时数据传输。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6533b7ba7d4982a6eb749d86