什么是 SSE？
SSE（Server-Sent Events），又称为服务端推送、服务器推送事件，是一种基于 HTTP 的轻量级服务器推送技术。它允许服务器向客户端推送数据，而无需客户端发起请求。与 WebSocket 相比，SSE 不需要进行握手协商，更加轻量级。
SSE 的工作原理是，客户端发起一次 HTTP 连接请求到服务器，并在请求头中添加 Accept: text/event-stream，表明希望接收服务器推送的事件。服务器在有相关内容需要推送时，以 text/event-stream 格式的数据流方式，通过持久连接将数据发送到客户端。客户端接收到数据后，利用 JavaScript 的 EventSource 对象进行处理。
SSE 在单页应用中的应用
在单页应用中，常见的应用场景包括消息通知、定时推送数据等。与传统的轮询方式相比，SSE 有以下优势：
- 实时性更高。传统轮询需要客户端不断地向服务器发送请求，造成服务器和网络资源的浪费；而 SSE 可以让服务器随时向客户端推送数据，实时性更高。
- 降低服务器压力。SSE 会维持一个长连接，在客户端和服务器之间建立一个 TCP 连接。客户端只需要维持一个连接等待服务器的推送数据就可以了，可以减少服务器的压力，提高系统性能。
SSE 的实现方式
实现 SSE 需要注意以下几点：
- 服务器必须能够发送
text/event-stream格式的数据流。 - 客户端需要使用 JavaScript 的
EventSource对象来接收服务器推送的数据。 - 服务器需要使用 HTTP 长连接来保持连接不中断。
服务端实现
以下是 Node.js 上 SSE 的一种实现方式：
-- -------------------- ---- -------
----- ---- - ----------------
----------------------- ---- -- -
-- -------- --- ------- -
------------------ -
--------------- -------------------- -- ---- ------------ - -----------------
---------------- ----------- -- -------
------------- ------------ -- ------------
---
----- ----- - -------------- -- -
---------------- ------------------ -------- ------ ------ ----------
-- ------
-
----------------客户端实现
以下是客户端使用 EventSource 对象接收服务器推送数据的实现方式：
const source = new EventSource('/sse');
source.onmessage = (event) => {
const data = JSON.parse(event.data);
console.log(data); // { message: 'hello world' }
}总结
SSE 是一种轻量级的服务器推送技术，可以与单页应用结合使用，实现实时性更高的数据推送。SSE 的实现方式需要注意设置 text/event-stream 格式、使用长连接和禁止客户端缓存等细节问题。在实现过程中，可以针对具体场景进行优化和定制，提高系统性能和用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64b26a3148841e9894ea41a3