引言
在前端实时通信中，Server-sent Events (SSEs) 可以提供一种简单而高效的方法。SSEs 允许 Web 应用程序通过单向连接从服务器接收事件流。SSEs 被认为是一种比 WebSocket 更简单的实时通信方案，因为它们不需要建立双向连接。
然而，SSEs 在处理连续事件流时，会出现一些短连接问题，本文将会讨论这些问题及其解决方案。
短连接问题
问题1：数据滞后或丢失
由于 SSEs 基于 HTTP 的长轮询技术，这意味着客户端必须向服务器发送多个短连接请求，以便定期获取最新事件。 如果连接过早断开（由于网络故障或计时器到期等原因），则客户端将无法获取最新事件，可能会导致数据丢失或滞后。
问题2：资源占用
在每次请求中，SSEs都会发送一个不包含任何数据的 HTTP 请求，并在服务器上开启一个独立处理进程。 在高流量的情况下，这可能导致服务器过度占用资源。
问题3：连接错误
由于短连接的本质，SSEs 受到网络连接不稳定性的影响。客户端可能会在不知道原因的情况下断开连接，并重新连接多次。
解决方案
方案一：实现的优化
SSEs 应该尽可能在一条连接上保持一个事件流，以减少握手和事件流的重新开始。 为此，可以将超时延迟添加到服务器端的 HTTP 响应，以尽可能拖延服务器关闭连接。另外，在请求头中设置重传时间，可以防止丢失事件。
实现示例：
服务器端：
-- -------------------- ---- ------- ----- ------- - - --------------- -------------------- ------------- ------------- ---------------- ----------- ------------------------------ ---- -------------- ------ - -------------- -- - ---------------------------------- ---- ------- --------- -- ----- ------------------ --------
客户端：
const source = new EventSource('/events')
source.onmessage = (e) => console.log(JSON.parse(e.data))方案二：使用 WebSocket
WebSocket 是一种双向通信协议，可以提供更稳定有效的方式来实现客户端和服务器端之间的实时通信。相比 SSEs，WebSocket 具有更好的容错性和更低的资源占用。但是，WebSocket 可能更复杂并且需要一些特殊的服务器支持。
实现示例：
服务器端：
-- -------------------- ---- -------
----- --------- - -------------
----- --- - --- ------------------
----- ----
--
-------------------- ---- -- -
-------------- -- -
------------------------ ---- ------- ---
-- -----
--客户端：
const ws = new WebSocket('ws://localhost:8080')
ws.onmessage = (e) => console.log(JSON.parse(e.data))结论
本文介绍了 SSEs 短连接可能会出现的问题及其解决方案。 对于要求高吞吐率和更好容错性的实时通信应用程序，WebSocket 可能更适合。 SSEs 适用于那些具有中等到低流量需求的 Web 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6715fc3dad1e889fe21a098b