Server-sent Events（SSE）是一种基于 HTTP 的服务器端推送技术，它允许服务器向客户端发送事件流，从而实现实时数据传输。在前端开发中，SSE 可以用于实现聊天室、实时通知、实时数据更新等功能。
然而，SSE 的一个缺点是没有内置的超时机制。如果服务器端在一段时间内没有发送任何事件，那么客户端将一直等待，直到连接超时。这可能会导致客户端浏览器资源的浪费，因此我们需要增加超时机制来解决这个问题。
实现超时机制的方法
实现超时机制的方法有很多种，这里介绍两种比较常用的方法。
方法一：使用 setTimeout 和 clearTimeout
我们可以在客户端建立 SSE 连接时，使用 setTimeout 函数设置一个超时时间，如果在这个时间内没有收到任何事件，则认为连接超时。具体实现代码如下：
-- -------------------- ---- ------- --- --- - --- -------------------- --- ------- - ------------- -- - ------------ ---------------- ---------- ---------- -- ------ -- ------- - - ------------------------------- ------- -- - ---------------------- -- ------------ --------------------- ---------- ------------ ---
在这个例子中，我们设置超时时间为 5 秒。如果在 5 秒内没有收到任何事件，那么我们就关闭 SSE 连接，并在控制台输出超时信息。
方法二：使用服务器端的心跳机制
另一种方法是在服务器端实现一个心跳机制，定期向客户端发送一个空事件，以保持连接的活跃状态。客户端在收到心跳事件后，可以重置超时计时器。具体实现代码如下：
-- -------------------- ---- ------- --- --- - --- -------------------- --- ------- - ----- ------------------------------- ------- -- - ---------------------- -- ------------ --------------------- ---------- ------------ --- --------------------------------- -- -- - --------------------- ------------ --- -- ----- -- - -------------- -- - --------------------- -------------------- -- -------
在这个例子中，我们在客户端监听了一个名为 "heartbeat" 的事件。服务器端每隔 10 秒向客户端发送一个 "heartbeat" 事件，客户端在收到该事件时重置超时计时器。如果在超时时间内没有收到任何事件，就认为连接超时。
总结
SSE 是一种非常有用的技术，但是缺乏超时机制可能会导致客户端浏览器资源的浪费。本文介绍了两种实现超时机制的方法，希望能够帮助读者更好地使用 SSE 技术。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/660c04dfd10417a222c406c0