什么是Server-sent Events？
Server-sent事件是一种在客户端浏览器上与服务器保持长时间会话的协议，它是基于HTTP的，用于服务器向客户端推送实时更新的数据。相比于WebSocket，Server-sent Events 的实现更加简单，而且它的兼容性更好，因为大多数现代浏览器都支持该协议。
为什么需要心跳检测？
由于Server-sent Events 是长时间会话，所以客户端与服务器之间需要保持一个稳定的连接。当服务器出现故障或者网络不稳定的情况下，客户端与服务器之间的连接可能会被中断。为了发现这种情况，客户端需要进行心跳检测，以确保客户端与服务器之间的连接的稳定性。
怎么实现心跳检测？
实现心跳检测是非常简单的，只需要在服务器发送数据时添加一个特定的字段，然后在客户端对这个字段进行监听即可。在客户端中，我们可以使用 EventSource 对象来连接服务器，这个对象封装了 Server-sent Events 工作流程的大多数功能。
下面是一个简单的示例代码：
-- -------------------- ---- -------
----- ----------- - --- -----------------------------------
-- ----------------
----------------------------------------- -- -- -
------------------- -- --------
---
-- ----------------------
--------------------------------------- ----- -- -
----------------------- ------------
---
-- --------------------
------------------------------------- -- -- -
------------------- ---------- ---------
---在服务器端，我们需要在响应中添加一个特定的字段，例如 event: heartbeat，以便客户端能够监听到心跳事件。下面是一个示例代码：
res.write('event: heartbeat\n\n');
res.write('data: {}\n\n');在客户端连接服务器之后，我们可以定时发送心跳请求以检测服务器的连接状态。下面是一个简单的示例代码：
setInterval(() => {
fetch('/heartbeat');
}, 3000);怎么优化心跳检测？
上述示例代码每隔3秒钟就会向服务器发送一个心跳请求，这种方式不仅会占用大量的网络带宽，而且会导致服务器的性能下降。为了优化心跳检测的性能，我们可以采用如下两种方式。
方式一：增加一个定时器
我们可以在客户端中增加一个定时器，每隔一定时间就检测一次服务器的连接状态。下面是一个简单的示例代码：
-- -------------------- ---- -------
--- ----------- - -----
-------------- -- -
-- -------------- -
------------------
-
----------- - ------
-- ------
----- ----------- - --- -----------------------------------
-- ----------------
----------------------------------------- -- -- -
------------------- -- --------
----------- - -----
---
-- ----------------------
--------------------------------------- ----- -- -
----------------------- ------------
---
-- --------------------
------------------------------------- -- -- -
------------------- ---------- ---------
---在上面的代码中，我们增加了一个名为 isConnected 的变量，用于记录服务器的连接状态。在定时器中，我们检测这个变量的值是否为 false，如果是就重新加载页面。而在 Server-sent Events 的监听器中，我们需要将 isConnected 的值设置为 true 来表示服务器连接正常。
方式二：增加一个心跳消息
除了定时检测服务器的连接状态之外，我们还可以增加一个心跳消息，用于保持客户端与服务器之间的连接。下面是一个简单的示例代码：
-- -------------------- ---- -------
--- ------------
-------- ----------------- -
----------- - --- -----------------------------------
-- ----------------
----------------------------------------- -- -- -
------------------- -- --------
---
-- ----------------------
--------------------------------------- ----- -- -
----------------------- ------------
---
-- --------------------
------------------------------------- -- -- -
------------------- ---------- ---------
--------------------------- ------
---
-- --------
-------------- -- -
------------------------------
-- ------
-
------------------在上面的代码中，我们增加了一个名为 initEventSource 的函数，用于初始化 Server-sent Events 的连接。在函数中，我们除了增加心跳事件的监听器之外，还增加了一个定时器，用于发送心跳消息。当客户端收到心跳消息时，它就会向服务器发送一个回应，以表明服务器的连接正常。当客户端在一段时间内没有收到服务器的回应时，就会判定服务器已经断开连接，并在3秒钟后重新连接服务器。
总结
在 Server-sent Events 中实现心跳检测，可以确保客户端与服务器之间的连接的稳定性。通过增加定时器或者心跳消息，我们可以优化心跳检测的性能。希望本文对读者在实际开发中有所启发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64538539968c7c53b07ded11