什么是 SSE？
SSE（Server-Sent Events）是一种基于 HTTP 协议的服务器端推送技术。它允许服务器端向客户端发送异步消息，而不需要客户端发送请求。和 WebSocket 不同，SSE 建立的是持久化连接，只支持单向通信。在需要更新频率较低的情况下，SSE 是一种可以替代 WebSocket 的技术。
SSE 的优点
- 可以通过 HTTP 的长连接（HTTP 1.1）实现数据的实时推送，无需客户端不断地发起请求拉取数据。
- 相对于 WebSocket，SSE 有更好的兼容性，表现更可靠。
- SSE 是基于标准的 HTTP，因此非常易于使用和部署。
SSE 的应用场景
- 实时事件处理：如提醒用户有新的消息、有人点赞等。
- 实时监控：如实时更新服务器 CPU 的使用率等。
SSE 的实现
服务端实现
服务端实现 SSE 需要设置返回的响应头，例如：
HTTP/1.1 200 OK
Content-Type: text/event-stream
Cache-Control: no-cache
Connection: keep-alive
data: {JSON 数据}\n\n
event: {事件名}\ndata: {JSON 数据}\n\n
event: {事件名}\nretry: {重试时间（毫秒）}\ndata: {JSON 数据}\n\n- Content-Type 表示返回的数据类型为 text/event-stream。
- Cache-Control：no-cache 表示不缓存。
- Connection：keep-alive 表示建立持久化连接。
在 header 中，每个事件之间应该留有一个空行； 在每个事件中，根据需要添加 event 字段（表示事件类型）、data 字段（表示事件数据）和 retry 字段（表示在重新连接前的等待时间）。
客户端实现
客户端可以使用 EventSource 对象处理服务端所发送的事件。它支持 onopen、onmessage 和 onerror 事件，分别表示连接建立、收到消息和发生错误时的处理方式。例如：
-- -------------------- ---- ------- ----- ------ - --- -------------------- ---------------------------------- - -- - -------------------- --- --- ------------------------------- - -- - ----------------------- --- -------------------------------- - -- - ------------------------- ---
addEventListener 方法用于注册监听器，onmessage、onopen 和 onerror 分别对应了 message、open 和 error 事件。
一个完整的 SSE 示例
下面给出一个完整的 SSE 示例。服务端使用 Express 框架实现：
-- -------------------- ---- -------
----- ------- - -------------------
----- --- - ----------
----------------------------------
-------- ---------------- ---- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
-------------- -- -
----- -- - --- ----------------------------
----- ---- - ---- ------------ ---- -- - ------- -----------
----------------
-- ------
-
--------------- -------------
---------------- -- -- -
------------------- ------- -- ------------------------
---客户端使用简单的 HTML + JavaScript 实现：
-- -------------------- ---- -------
--------- -----
------
------
--------- --- ------------
-------
--------- -
----------- ------
-
--------
-------
------
--- ------------- --- ---------
---- --------------------
--------
----- ------ - --- --------------------
---------------------------------- ----- -- -
----- ---- - -----------------------
----- -------- - ------------------------------------
------------------ -- ------------
---
---------
-------
-------运行后，可以看到客户端会每秒接收到一个 SSE 事件，并实时展示在页面上。
总结
SSE 技术是一种非常方便的服务器推送技术，可以用于实时事件处理和实时监控等场景。通过该篇文章的介绍，相信读者对 SSE 有了更深入的了解。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647ef35648841e9894ea28e6