什么是 SSE
SSE 全称 Server-Sent Events，是指服务端向客户端推送消息的一种实现方式，基于 HTTP 长连接技术。相比于 WebSocket，SSE 的实现更加简单，对于一些轻量级的应用场景非常适用。
在 SSE 中，服务端会把消息以一定的格式推送给客户端，客户端通过监听一个指定的 URL，就可以接收到服务端推送的消息。SSE 的流程如下：
- 客户端发送 HTTP 请求到服务端
- 服务端在处理完请求后，保持连接并不断向客户端发送消息
- 客户端接收消息，并根据消息内容进行相应处理
SSE 连接断开的原因
尽管 SSE 的实现相对简单，但是在实际应用中还是有可能出现连接断开的情况。常见的 SSE 连接断开的原因有以下几种：
- 网络问题：客户端和服务端之间的网络出现了问题导致连接断开。
- 服务器重启：服务端重启会导致 SSE 连接断开。
- 客户端刷新页面：如果客户端刷新了页面，那么 SSE 连接会被关闭。
- 客户端断网：客户端网络出现问题也会导致 SSE 连接中断。
当 SSE 连接断开后，需要对其进行处理，以保证后续的业务能够正常进行。常见的 SSE 连接断开的处理方法有以下几种：
1. 客户端重连
在 SSE 连接断开后，可以考虑让客户端重新连接。为了避免客户端频繁尝试连接过多次，我们可以在客户端尝试连接的间隔中加入一些随机性，以避免同时出现多个客户端重新连接导致服务端压力过大。
-- -------------------- ---- -------
--- ---------- - --
----- ------------- - ---
-------- ----------- -
-- ----------- - -------------- -
-------
-
-- -----
----- ------------ - ----------- ------------- - ---- - ------------------------ - ------
------------- -- -
-- ---- ---
-- --- ---------
-- --------------
-2. 重新订阅
另一种处理 SSE 连接断开的方法是重新订阅。当 SSE 连接断开后，可以主动向服务端重新发起订阅请求，从而继续接收服务端发送的消息。需要注意的是，重新订阅后，由于 SSE 是一种流式传输，可能会收到一些之前的消息，需要在客户端进行去重和过滤。
-- -------------------- ---- -------
----- ----------- - --- --------------------
--------------------------------------- ------- -- -
-- ----
---
------------------------------------- -- -- -
-- --- --------
-- ----
--------------------
----- -------------- - --- --------------------
---3. 外部事件处理
除了订阅和重新连接，也可以考虑使用外部事件处理机制，将 SSE 连接断开的事件通过自定义事件传递出来，在外部进行处理。这种方法可以让不同的模块对 SSE 连接断开事件进行统一的处理，避免了代码的重复。
-- -------------------- ---- -------
----- ----------- - --- --------------------
--------------------------------------- ------- -- -
-- ----
---
------------------------------------- -- -- -
------------------------ ---------------------------------
--------------------
---
-- ----- ---------------- --
------------------------------------------- -- -- -
-- --- --------
-- ----------
---总结
SSE 是一种比较常用的实现消息推送的方式，但是在使用 SSE 的时候还是需要注意连接断开的处理。一旦连接断开，需要及时采取措施，以保证后续的业务能够正常进行。常用的 SSE 连接断开的处理方法有：客户端重连、重新订阅和外部事件处理机制。针对不同的场景，可以选择不同的处理方法，以确保业务能够高效稳定地运行。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64d4440ab5eee0b525bc5fc0