Server-Sent Events (SSE) 是一种服务器推送技术，可以让客户端通过简单的 HTTP 请求接收实时数据。在前端应用中，SSE 常被用于实时更新数据、推送消息等场景。然而，在使用 SSE 过程中，我们可能会遇到连接超时的问题。本文将介绍如何设置 SSE 连接超时时间，避免因长时间无响应而导致连接中断。
SSE 连接超时问题分析
在使用 SSE 时，我们需要使用 EventSource 对象建立长连接，通过监听 onmessage 事件实现消息的推送。然而，由于某些原因（比如网络不稳定、服务器负载等），SSE 连接可能会出现超时的情况。默认情况下，SSE 连接的超时时间为 30000ms，即 30s。当连接超时时，onerror 事件将被触发，对应的回调函数可以处理连接超时的情况。
const sse = new EventSource('/api/sse');
sse.addEventListener('message', event => {
console.log('message received:', event.data);
});
sse.addEventListener('error', error => {
console.error('connection timeout:', error);
});然而，在某些场景中，我们可能需要自定义 SSE 连接的超时时间。比如，当我们需要实现实时数据的双向通信时，短时间内缺乏客户端的响应可能会导致连接的中断。此时，我们需要针对性的设置连接超时时间，以保证连接的稳定性。
在浏览器中，可以通过修改 EventSource 对象的 timeout 属性来设置 SSE 连接的超时时间。例如，我们将超时时间设置为 60s：
const sse = new EventSource('/api/sse');
sse.timeout = 60000;此外，我们还可以使用 XMLHttpRequest 来模拟 SSE 连接，从而实现更多的定制化设置。以下是一段使用 XMLHttpRequest 实现 SSE 连接的示例代码：
-- -------------------- ---- -------
-------- ------------- -------- -
----- --- - --- -----------------
--------------- ---- ------
----------- - --------
---------------------- - ---------- -
-- --------------- --- ---------------------- -
---------------- ---------- ---------
- ---- -- --------------- --- -------------------------------- -
-- ----------- --- --- -- ------------------------------------- --- -------------------- -
---------------- ------ ----------
- ---- -
---------------------- --- ----------- ----------------
------------
-
- ---- -- --------------- --- ----------------------- -
----- ----- - --------------------------------
------------------ -- -
-- ------------------------ --- -
-- ------ -----
- ---- -- ----------------------- --- -
-------------------- ----------- -------------------
- ---- -- ----- --- --- -
--------------------------
- ---- -
--------------------- --- ---------- ------
-
---
- ---- -- --------------- --- -------------------- -
---------------- ---------- ------ ---- -------- ------------
-
--
----------- - ---------- -
------------------ ---------- ---------
--
------------- - ---------- -
------------------ ---------- ----- ------
--
-----------
-
-------------------- -------这段代码使用 XMLHttpRequest 发起 GET 请求，配置了超时时间并监听了相应的事件。在收到服务器的响应后，根据响应的数据格式进行处理。通过这种方式，我们可以更加灵活的控制 SSE 连接的超时时间和行为，实现更高效的数据通信。
总结
SSE 是一种优秀的实时数据推送技术，在前端开发中得到广泛的应用。然而，由于其长连接的特点，我们需要注意连接超时的问题。本文介绍了 SSE 连接超时的原因和解决方法，为使用 SSE 技术的开发者提供了参考。需要注意的是，超时时间不宜过长或过短，需要根据具体业务场景进行调整。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6450df6c980a9b385b9c158f