什么是 SSE
SSE（Server-Sent Events）是一种基于 HTTP 协议的服务器推送技术，使得服务器可以实时向客户端发送数据，而无需客户端主动请求。SSE 还支持自定义事件类型和事件数据，可以广泛应用于实时通知、实时聊天等场景。
SSE 的基本架构
SSE 由三部分组成：客户端、服务器和事件流。其中客户端使用浏览器内置的 EventSource 对象来接收事件流，服务器端则需要实现 SSE 的协议规范，即向客户端发送包含特定格式的文本数据流。
SSE 的工作原理
SSE 的工作原理可以简述为：客户端向服务器发送一个 HTTP 请求，请求头中包含了 SSE 的协议规范。服务器返回的响应头中包含了 Content-Type: text/event-stream 和 Cache-Control: no-cache，表示这是一个 SSE 的事件流，而且不应该被缓存。然后服务器就会持续向客户端发送事件数据，每个事件数据都以特定格式的文本块发送，客户端接收到事件数据后就可以对其进行处理。
下面是一个 SSE 事件数据的示例：
event: message
data: {"content": "Hello, SSE!"}其中，event 表示事件类型，可以自定义；data 表示事件数据，可以是任意格式的数据，但必须是字符串类型。
SSE 的示例代码
下面是一个简单的 SSE 示例，使用 Express 框架来实现 SSE 的协议规范，向客户端发送一个每秒递增的计数器：
服务器端代码
-- -------------------- ---- -------
----- ------- - -------------------
----- --- - ----------
--------------- ----- ---- -- -
------------------ -
--------------- --------------------
---------------- ----------
---
--- ----- - --
-------------- -- -
----------------- ----------
---------------- -----------------
-- ------
---
---------------- -- -- -
---------------- ------ -- ------- -- ----------------------------
---客户端代码
const eventSource = new EventSource('/sse');
eventSource.addEventListener('count', event => {
console.log(`Count: ${event.data}`);
});在浏览器中打开 http://localhost:3000/sse，控制台会每秒输出一个递增的计数器值。
总结
SSE 是一种基于 HTTP 协议的服务器推送技术，可以实现服务器向客户端实时发送数据。SSE 的基本架构由客户端、服务器和事件流组成，其工作原理是客户端向服务器发送 SSE 协议请求，服务器以 SSE 协议规范返回数据流，客户端接收数据流并处理。SSE 可以应用于实时通知、实时聊天等场景。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65769947d2f5e1655dfea108