什么是 SSE
SSE（Server-Sent Events）是一种基于 HTTP 的服务器推送技术，它允许服务器向客户端发送实时事件流。相比 WebSocket，SSE 更加轻量级，适合于一些简单的实时通信场景。
SSE 的特点是单向通信，只能由服务器推送数据到客户端，而客户端无法向服务器发送数据。
SSE 数据格式
SSE 的数据格式比较简单，每个事件都由以下三个部分组成：
- 事件标识符（event）
- 数据字段（data）
- 注释字段（comment）
其中，事件标识符和注释字段都是可选的，数据字段是必须的。事件标识符用于标识事件的类型，而注释字段则用于传递一些额外的信息。
一个 SSE 事件的格式如下：
event: eventType data: eventData : comment
其中，eventType 和 eventData 都是字符串，comment 是注释字段，可以为空。
数据格式转换的方法
在实际开发中，我们可能需要将一些复杂的数据类型转换为 SSE 数据格式，以便向客户端推送实时数据。这时，我们可以使用一些工具函数来完成转换。
将 JSON 转换为 SSE 数据格式
将 JSON 对象转换为 SSE 数据格式的方法比较简单，只需要将 JSON 对象的属性拼接成 SSE 数据格式即可。以下是一个将 JSON 对象转换为 SSE 数据格式的示例代码：
function jsonToSse(json) { let sse = ''; for (let key in json) { sse += `data: ${key}: ${json[key]}\n`; } return sse; }
该函数将 JSON 对象的属性名作为事件标识符，属性值作为数据字段。
将数组转换为 SSE 数据格式
将数组转换为 SSE 数据格式的方法与将 JSON 对象转换为 SSE 数据格式的方法类似，只需要将数组中的元素拼接成 SSE 数据格式即可。以下是一个将数组转换为 SSE 数据格式的示例代码：
function arrayToSse(arr) { let sse = ''; arr.forEach((item) => { sse += `data: ${item}\n`; }); return sse; }
该函数将数组中的元素作为数据字段。
实现 SSE 数据推送
在实际开发中，我们需要使用服务器端的语言来实现 SSE 数据推送。以下是一个使用 Node.js 实现 SSE 数据推送的示例代码：
-- -------------------- ---- ------- ----- ---- - ---------------- ----------------------- ---- -- - -- -------- --- ------- - ------------------ - --------------- -------------------- ---------------- ----------- ------------- ------------ --- -------------- -- - ----- ---- - - ----- --- ---------------------------- -------- ------- ------- -- ---------------- ------------------------------ -- ------ - ---- - ------------------ ---------------- -------------- --------- ------ ------ ---------- ------------ ------- ------ ------- --------- -------- ----- ----------- - --- -------------------- --------------------------------------- ------- -- - ------------------------ --- --------- ------- ------- --- - ----------------展开代码
该代码创建了一个 HTTP 服务器，并在 /sse 路径上实现了 SSE 数据推送。每秒钟向客户端推送一个包含当前时间和一条消息的 JSON 对象。
客户端代码使用了浏览器内置的 EventSource 对象来接收 SSE 数据，并在控制台输出。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d91156a941bf713408423c
