前言
SSE （Server-Sent Events）是一项 HTML5 技术标准，它允许服务端向客户端发送单向的、连续的消息流。SSE 利用了浏览器内置的事件源和事件监听器的机制，可以轻松地实现服务器的数据推送功能，使得客户端获取最新的数据变得非常便捷。
本文主要介绍 SSE 技术的实现原理，以及如何在服务端实现 SSE 服务器端代码。
SSE 技术原理
SSE 技术是基于 HTTP 协议的，它利用了 HTTP 1.1 协议中的 Transfer-Encoding: chunked 和 Content-Type: text/event-stream 两个响应头字段，在客户端与服务器之间建立持久性的连接，实现服务器的实时数据推送。
SSE 连接的建立过程如下：
客户端向服务器发送 SSE 请求，请求头中包含了
Accept: text/event-stream字段，表示客户端需要服务端发送 SSE 数据。服务器接收到 SSE 请求后，返回
Content-Type: text/event-stream和Transfer-Encoding: chunked响应头，表示返回的数据是文本流，并且会不断地分块发送。客户端收到响应后，开始解析文本流，如果服务器发送的数据满足 SSE 格式，就会触发客户端的
onmessage事件，客户端就可以处理收到的数据了。SSE 连接默认是保持开启的，除非客户端关闭连接或者网络出现异常，否则服务器会不断地向客户端发送 SSE 数据。
SSE 格式的数据是以 data: 开头，以 \n\n 结尾的数据块，数据块可以包含多行数据。例如：
data: {"name": "Tom", "age": 20, "gender": "male"}
data: {"name": "Jane", "age": 22, "gender": "female"}SSE 服务端代码实现
下面是一个基于 Node.js 的 SSE 服务器端代码示例：
-- -------------------- ---- -------
----- ---- - ----------------
----------------------- ---- -- -
--------------------- -------------
------------------ -
--------------- --------------------
---------------- -----------
------------- -------------
---
-------------- -- -
----- --- - --- -------
----- ---- - ------ -------- -----------------------------
----------------
-- ------
--------------- -- -- -
---------------- ------ --------- -- ---- --------
---代码解读：
http.createServer()创建一个 HTTP 服务器，监听客户端请求，并返回 SSE 数据；res.writeHead()设置响应头，包括Content-Type、Cache-Control、Connection等字段。其中Connection: keep-alive表示 SSE 连接是保持开启的；setInterval()定时器不断地向客户端发送 SSE 数据，这里是每秒发送一次，发送一个包含当前时间的 SSE 数据块。
注意：本示例代码只是一个最简单的 SSE 服务器端实现，实际应用中需要根据实际需求编写 SSE 代码。
总结
本文详细介绍了 SSE 技术原理的实现过程，以及如何在 Node.js 服务端实现 SSE 代码。SSE 技术适用于实现数据持续推送的应用场景，比如在线聊天室、数据实时监控等，SSE 技术可以帮你实现高效的数据推送功能，提升用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c23ad783d39b48816447d6