前言
对于 Web 开发中的实时数据传输，我们常常会使用常见的技术如 WebSocket 和 Comet。但其实还有一种相对较为轻量的事件驱动技术 — Server-Sent Events（简称 SSE）。与 WebSocket 相比，SSE 通常更适用于一些低延迟、长连接的场景。
本篇文章将深入探讨 SSE 技术的原理和实现方法，并使用 Node.js 实现一个简单的 SSE 服务端。
SSE 技术原理解析
SSE 技术是一种推送（push）型服务器端发送事件（server-sent events）的通信协议。它是基于 HTTP 和 HTML5 规范的，主要用于在客户端与服务端之间实现低延迟、长连接的实时数据传输。
SSE 数据格式
SSE 协议中，服务端向客户端发送的数据格式如下：
event: <event name> data: <event data>
其中 event 和 data 为 SSE 协议中的两个重要字段：
event：表示事件名称，必须为纯文本，不能包含冒号和换行符。data：表示要推送的数据，可以包含任何文本。
SSE 协议格式
SSE 通信由 HTTP GET 请求发起。首先客户端会向服务端发送一个 HTTP GET 请求，然后服务端返回一个使用了 text/event-stream MIME 类型的 HTTP 响应，形如：
-- -------------------- ---- ------- -------- --- -- ------------- ----------------- -------------- -------- ------ ------ ----- ----- ------ ----- ------ ------ ----- ----- ------ ----- ---
其中 Content-Type 头必须设置为 text/event-stream ，以便浏览器将响应识别为 SSE 数据流。
一旦建立了 SSE 连接，服务端可以在任何时候向客户端发送数据，只要数据格式符合 SSE 数据格式要求即可。在客户端接收到 SSE 数据时，它可以在 JavaScript 中监听 EventSource.onmessage 事件，该事件将在每次 SSE 数据到达时触发。
SSE 连接流程
SSE 连接的基本流程如下：
- 建立基于 HTTP GET 请求的 SSE 连接。
- 服务端响应 SSE 数据流。
- 服务端向客户端发送
data和event字段。 - 客户端通过 SSE 对象的
onmessage事件接收服务端发送的数据。
实现 SSE 服务端
在 Node.js 中实现 SSE 服务端非常简单，我们只需要使用 http 模块创建一个 HTTP 服务器，并监听客户端的 HTTP GET 请求即可。下面是一个简单的 SSE 服务端的示例代码：
-- -------------------- ---- -------
----- ---- - ----------------
----------------------- ---- -- -
-- ------------ --- ---
----------------------------- ---------------------
------------------------------ ------------
--------------------------- --------------
-- --------
-------------- -- -
----- ---- - ------ ----- ----------------------------------
----------------
-- ------
----------------
---------------- ------ ------------------------在这段代码中，我们使用了 setInterval 定时向客户端发送数据，每秒钟发送一次。注意，我们在响应头中设置了 Content-Type 为 text/event-stream，以便浏览器识别该响应类型，并以 SSE 数据流形式接收服务端发送的数据。
总结
本文详细介绍了 SSE 技术的原理和实现方法。通过 Node.js 实现一个简单的 SSE 服务端，我们可以更好地理解 SSE 技术在实际应用中的用途和优势。SSE 技术的轻量、低延迟和易于实现，使其在许多场景中具有广泛的应用前景。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64aceecd48841e9894903ac5