什么是 SSE
SSE (Server-Sent Events) 是 HTML5 技术规范中定义的一种服务器推送技术，它允许服务器向客户端发送事件流，客户端通过 EventSource API 接收这些事件流。SSE 相比于 WebSocket，它支持在浏览器中发送长轮询请求和无限期的 HTTP 响应。这使得 SSE 更容易实现，更容易扩展，而且可以在所有现代 Web 浏览器上工作，包括移动设备。
SSE 的使用场景
SSE 适用于需要实现实时通信的场景，如聊天室、实时数据展示等。相比于传统的轮询，SSE 的优点在于减少了网络请求的数量，从而减轻了服务器的压力，同时也提高了数据传输的效率。在支持 SSE 的浏览器中，可以使用原生的 JavaScript API 轻松实现 SSE。
如何实现 SSE
1. 服务端
SSE 的核心机制是浏览器向服务器发送一个带有 Accept: text/event-stream 请求头的普通 HTTP 请求。服务器应该在处理这个请求时，将 Content-Type 设置为 text/event-stream，然后按照 SSE 规范向客户端发送事件流。
-- -------------------- ---- -------
-- ------- ----
----- ---- - ---------------
----------------------- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
--
-------------- -- -
----- ---- - -
-------- ------- -----
-
---------------- -----------------------------
-- -----
---------------上面的示例代码创建了一个 Node.js HTTP 服务器，为每个连接的客户端提供 SSE 服务。服务器每隔一秒钟向客户端发送一条形如 data: {"message":"Hello, SSE!"}\n\n 的事件流，客户端可以在接收到这些事件流后，根据需要进行处理。
2. 客户端
接下来，我们来看一下如何在客户端中使用 SSE。使用 SSE 的第一步是创建一个 EventSource 对象，指定需要连接的服务器端点 URL。
const eventSource = new EventSource('/sse')在成功连接服务器之后，EventSource 对象将自动接收服务器发送的事件流。对于每个事件的处理都可以通过 EventSource 对象的监听函数来完成。
-- -------------------- ---- ------- ----- ----------- - --- ------------------- --------------------------------------- ------- -- - --------------------- ----- --------------- -- ------ ------------------- - ----- -- - -------------------------- ------- -------- -
上面的示例代码创建了一个 EventSource 对象，监听来自 /sse 的事件流。当服务器端向客户端发送一个事件流时，将触发 message 事件。该事件的参数 event.data 为服务器端发送的实际数据。如果在连接 SSM 失败，则会触发 error 事件，可以在 onerror 函数中处理该错误。
需要注意的是，SSE 收到的数据格式必须符合以下规范：
- 每个事件必须以
\ndata:开头； - 如果事件有多行数据，每行数据必须以
\n开头； - 每个事件末尾必须以两个
\n结尾。
总结
SSE 是一种非常简单且易于实现的实时通信技术，尤其适用于需要实现即时通信的 Web 应用程序。SSE 不仅能够减少网络请求次数，减轻服务器负担，还能提高数据传输的效率。使用 SSE，可以快速实现 Web 应用程序的实时通信功能，为用户提供更好的使用体验。
参考
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64d4648582d512f7d62eb615