前言
Server-Sent Events（SSE）是一种 HTML5 技术，它通过 HTTP 协议和服务器保持连接，服务器可以主动向客户端发送事件信息。SSE 在前端开发中应用广泛，例如实时聊天、实时消息推送等场景。
然而，SSE 的一个常见问题是断开重连失败，即在网络不稳定或服务器主动断开连接时，前端无法重新建立 SSE 连接，导致实时通信无法继续。下面将探讨 SSE 断开重连失败的原因及解决方案。
SSE 断开重连失败的原因
SSE 断开重连失败的原因常常是由于浏览器缓存导致的。默认情况下，浏览器将缓存上一次 SSE 连接的最后一个事件标识符（lastEventId），当重新建立 SSE 连接时会在请求头中带上该标识符，以此来继续上一次的事件流。但如果服务器此时已经不再发送事件，浏览器将会一直等待，直到超时断开连接，而无法重新建立连接。
SSE 断开重连失败的解决方案
方案一：在关闭 SSE 连接时，服务器返回一个特殊的事件
可以在服务器发送一个特殊的事件来告诉客户端 SSE 连接已经关闭，例如：
event: close data: Connection closed
在客户端接收到该事件时，关闭 SSE 连接并发起新的连接。
服务器端代码示例（Node.js）：
res.write('event: close\ndata: Connection closed\n\n');
res.end();客户端代码示例：
-- -------------------- ---- -------
----- ----------- - --- --------------------
--------------------- - --------------- -
-------------------
--
------------------------------------- --------------- -
--------------------
--------------------- -
----- -------------- - --- --------------------
-- ------ -- - ------ --- --
---方案二：在客户端手动清除缓存的 lastEventId
在客户端新建 SSE 连接时，手动清除浏览器缓存的 lastEventId，以保证每次都能从头开始接收事件数据。可以通过使用 XMLHttpRequest 的方式获取 SSE 数据，而不是直接通过 EventSource，因为在 XMLHttpRequest 中可以清除请求头中的 lastEventId。示例代码：
-- -------------------- ---- -------
--- ----------- - -----
-------- --------- -
----- --- - --- -----------------
--------------- --------
-- ------------- -
------------------------------------- -------------
-
---------------------- - ---------- -
-- --------------- --- ------------------- -- ---------- --- ---- -
----- ----- - -----------------------------
--- ----- - -----
--- ---- - - -- - - ------------- ---- -
----- ---- - ---------
-- ----------------------- --- -- -
----- - --- --------------------------------
- ---- -- ---------------------- --- -- -
---------- - -------------------------
- ---- -- -------------------- --- -- -
----------------- - -------------------------
- ---- -- ----- --- --- -
-- ------- -
----------- - ------------------
--------------------
-
-
-
--------------------- -
----------
-- -----
-
--
-----------
-
----------方案三：在客户端使用 WebSocket
WebSocket 是一种双向通信协议，在前端通信中应用广泛。与 SSE 不同，WebSocket 可以自定义协议并发送双向数据，也可以控制连接的建立和关闭。
WebSocket 的代码示例如下：
-- -------------------- ---- ------- ----- --------- - --- --------------------------------- ---------------- - --------------- - ---------------------- --------- ------- -- ------------------- - --------------- - ---------------------- ---------- ------- -- ----------------- - --------------- - ---------------------- --------- ------- -- ----------------- - --------------- - ---------------------- -------- ------- --
总结
以上是 SSE 断开重连失败问题的解决方案。方案一是在服务器主动关闭 SSE 连接时，返回一个特殊的事件，以通知客户端关闭连接并重新建立连接。方案二是在客户端手动清除浏览器缓存的 lastEventId，以保证每次都能从头开始接收事件数据。方案三是使用 WebSocket，通过双向通信协议来解决 SSE 的问题。
需要注意的是，在使用 SSE 和 WebSocket 时，要防止服务器返回过大的消息，以及断网等异常情况的处理，以保证实时通信的稳定性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64fbf7ebf6b2d6eab31fd703