什么是 SSE？
SSE(Server-Sent Events) 是一种在 Web 浏览器和服务器之间实现实时通信的技术，它允许服务端向客户端推送数据。
与传统的轮询不同，SSE 是基于 HTTP 长连接实现的，因此在服务器端有数据更新时，它可以主动向客户端推送数据，不需要客户端频繁地向服务器发起请求。
SSE 通常用于实现实时通知、实时聊天等应用场景。
心跳超时问题
由于 SSE 通常使用 HTTP 长连接，因此客户端需要不断向服务器发送心跳消息以保持连接，防止长连接被服务器断开。否则，长时间没有通信的连接可能被认为是死掉的连接，从而被服务器端断开。
SSE 规范中建议客户端每隔 3 秒发送一次心跳消息，同时建议服务器在长时间没有收到心跳消息时，应该主动向客户端发送一个特殊的消息以探测是否还存活。
然而，在一些网络较差或服务器压力较大的情况下，即使按照规范发送心跳消息，仍然有可能出现连接断开的情况，导致客户端无法接收到服务端推送的实时数据。
具体来说，就是客户端发送心跳请求，但服务端在一定时间内没有收到请求，就会认为这个连接已经断开了。
如何解决这个问题呢？
解决方法
一种可行的解决方法是在客户端和服务端分别设置超时时间，当一方没有及时响应时，另一方可以认为超时了，从而主动断开连接。
具体来说，客户端发送心跳请求时，可以设置一个超时时间，如果在该时间内没有收到服务端响应，就认为连接已经断开，并重新连接。服务端也可以设置一个类似的超时时间，当有客户端连接时，设置一个超时时间，在该时间内没有收到客户端的心跳请求，就主动断开该连接。这样可以避免死连接的情况出现。
以下是一份示例代码：
客户端
-- -------------------- ---- -------
----- ----------- - --- --------------------
--- ----------
------------------------------------ - -- -
---------------------
---------------
--
--------------------------------------- - -- -
-------------------- --------
---------------
--
------------------------------------- - -- -
-------------------- ---
---------------
--
-------- -------------- -
------------------------
--------- - ------------- -- -
---------------------------------
--------------------
----------
-- -------
-
-------- --------- -
-------------------
-服务端
-- -------------------- ---- -------
----- ---- - ----------------
----- ------- - ------ -- ----- ---
----------------------- ---- -- -
-- -------- --- ------- -
------------------ -
--------------- --------------------
-- ------
---------------- -----------
------------- -------------
------------------------------ ---
---
-- -----
---------------------
--- ----------
--------------- -- -- -
------------------------
--
-------------------------------
------------------------ -- -- -
-------------------------
-----------------
--
--------- - -------------- -- -
---------------------
----------------------------
-- ------
- ---- -
-------------------
----------
-
--------------- -- -- -
-------------------- ---- -----
--总结
SSE 是一种实现实时通信的技术，但长时间没有通信的连接可能会被服务器端断开，导致客户端无法接收到实时数据。
为了避免这个问题，可以在客户端和服务端分别设置超时时间，当一方没有及时响应时，另一方可以认为超时了，从而主动断开连接。
以上是一份解决心跳超时问题的示例代码，可以参考使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65b328e1add4f0e0ffc3a290