Server-Sent Events (SSE) 是一种从服务器向客户端单向传输数据流的技术，它可以实现实时更新和通知等功能。SSE 提供了许多有用的特性，其中包括设置超时时间，可以帮助开发人员更好地控制连接和避免错误。
超时时间的作用
在 SSE 中，客户端通过向服务器发送一个请求，请求建立一个连接来接收事件。如果服务器在一段时间内没有发送任何事件，则客户端会将连接视为已失效，并自动断开连接。这段时间就是超时时间。
超时时间的设置可以帮助开发人员更好地控制连接的稳定性和断开重连的时间，以及避免浪费服务器资源。如果超时时间设置得太短，客户端可能会频繁地重新连接，而这种频繁的连接可能会导致服务器负载过重。如果超时时间设置得太长，可能会导致客户端长时间等待，从而降低用户体验。
如何设置超时时间
在 SSE 中，超时时间可以通过设置服务器响应头中的 Cache-Control 属性来实现。例如，要设置超时时间为 10 秒：
Cache-Control: max-age=10
这意味着服务器在发送第一个事件后，客户端接收到的所有事件都应在 10 秒内发送。如果在此期间内服务器没有发送任何事件，则客户端将自动断开连接。
服务器还可以在每个事件后设置超时时间。这可以通过在每个事件的数据前添加一个注释标记，例如：
event: update
data: {"name": "Alice", "id": 12345}
: keep-alive timeout注释标记可以是任何字符串，但通常用于描述事件或超时时间。在上面的代码中，keep-alive timeout 表示服务器保持连接的超时时间为默认时间（通常为 30 秒，具体取决于服务器的配置）。
如果要覆盖默认超时时间，则可以将注释标记更改为类似于以下内容：
event: update
data: {"name": "Alice", "id": 12345}
: keep-alive timeout=10这将覆盖默认超时时间，将超时时间为 10 秒。
示例代码
下面是一个示例 SSE 服务器代码，用于实现每 5 秒发送一个事件，并设置每个事件的超时时间为 10 秒：
-- -------------------- ---- -------
----- ---- - ----------------
-------------------------- ----- ---- -
------------------ -
--------------- --------------------
---------------- -----------
---
--- ----- - --
-------------- -- -
--------
----------------- -----------
---------------- --------- --------------
------------ ---------- -----------------
-- ------
----------------在客户端上，可以使用以下代码来接收事件：
const es = new EventSource("http://localhost:8080");
es.onmessage = (event) => {
console.log(JSON.parse(event.data));
};以上示例代码仅作演示使用，实际应用中可能需要更复杂的逻辑和错误处理。
结论
在 SSE 中，设置超时时间可以帮助开发人员更好地控制连接的稳定性和断开重连的时间，以及避免浪费服务器资源。超时时间可以通过设置响应头或注释标记来实现。在实际应用中，需要根据具体需求合理设置超时时间，并进行有效的错误处理。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67174c4fad1e889fe220b1e9