在前端开发中，经常需要实现客户端与服务器之间的心跳检测，以确保连接的稳定性和可靠性。而使用 Server-Sent Events（SSE）技术，可以轻松地实现这一功能。
什么是 SSE？
SSE 是一种基于 HTTP 协议的服务器推送技术，它允许服务器向客户端发送事件流（event stream），而无需客户端发起请求。SSE 基于长轮询（long-polling）技术，但相比于长轮询，SSE 更加灵活、高效、可靠。
如何使用 SSE 实现心跳检测？
使用 SSE 实现心跳检测，需要在客户端和服务器端分别实现相关逻辑。
客户端实现
在客户端，需要创建一个 SSE 连接，然后监听服务器端发送的事件流。当服务器端发送心跳事件时，客户端可以根据事件内容进行相应的处理。
-- -------------------- ---- ------- ----- ----------- - --- -------------------------- ----------------------------------------- ----- -- - --------------------- --------- -------- ------------ -- ------ --- ------------------------------------- ----- -- - ------------------ ---------- -------- ------- -- ------ ---
在上面的代码中，EventSource 构造函数创建了一个 SSE 连接，参数是服务器端的 URL。然后使用 addEventListener 方法监听服务器端发送的事件流，当接收到 heartbeat 事件时，就会触发回调函数进行相应的处理。如果发生连接错误，则会触发 error 事件。
服务器端实现
在服务器端，需要定时向客户端发送心跳事件。可以使用 setInterval 方法定时发送事件流。在事件流中，可以包含各种类型的数据，例如文本、JSON 对象等。
-- -------------------- ---- -------
-- ---------- ----
--------------------- ----- ---- -- -
---------
---------------- -----------
--------------- --------------------
------------- ------------
---
----- ---------- - -------------- -- -
----------------- ---------------- --------------------
-- ------
--------------- -- -- -
--------------------------
---
---在上面的代码中，使用 Express.js 框架创建了一个路由，监听 /heartbeat URL。当客户端连接上来时，设置响应头，指定响应类型为 text/event-stream，并开启长连接（keep-alive）。然后使用 setInterval 方法定时发送 heartbeat 事件，其中 data 字段可以是任意类型的数据。当客户端关闭连接时，清除定时器。
总结
使用 SSE 实现心跳检测，可以轻松地实现客户端与服务器之间的实时通信，提高连接的稳定性和可靠性。在实际开发中，可以根据业务需求进行相应的扩展和优化。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66159790d10417a222597fba