Server-sent Events（SSE）是一种基于 HTTP 的服务器向客户端推送事件的技术。它允许服务器实时地向客户端推送数据，而无需客户端不断地向服务器发出请求。SSE 通常用于实现实时更新、实时通知等功能。
本文将介绍 SSE 的数据格式及处理方法，包括事件流、消息格式、事件类型、重连机制等内容，同时提供示例代码供读者参考。
事件流
SSE 的数据传输采用事件流（EventStream）的方式，即服务器向客户端发送一系列事件（Event），每个事件包含一个或多个消息（Message）。客户端通过监听事件流，即可接收到服务器推送的事件和消息。
事件流的格式如下：
event: [事件类型] data: [消息内容] event: [事件类型] data: [消息内容] ...
其中，每个事件由 event 和 data 两个字段组成，用冒号分隔。event 字段表示事件类型，data 字段表示消息内容。多个事件之间用空行分隔。
消息格式
SSE 的消息格式没有特定要求，可以是纯文本、JSON、XML 等格式。服务器可以根据实际需求选择合适的消息格式。客户端接收到消息后，可以根据消息格式进行相应的处理。
以下是一个文本格式的示例：
event: message data: Hello, SSE! event: message data: How are you?
以下是一个 JSON 格式的示例：
event: update
data: {"name": "张三", "age": 20}
event: update
data: {"name": "李四", "age": 25}事件类型
SSE 的事件类型没有特定要求，可以是任意字符串。通常情况下，事件类型用于区分不同类型的事件，例如更新、删除、新增等。
客户端可以根据事件类型进行相应的处理。例如，可以根据事件类型在页面上显示不同的内容，或者触发相应的操作。
以下是一个示例：
event: update
data: {"name": "张三", "age": 20}
event: delete
data: {"id": 1}
event: add
data: {"name": "李四", "age": 25}重连机制
由于 SSE 是基于 HTTP 的技术，因此可能会受到网络问题的影响。为了保证 SSE 的稳定性和可靠性，需要实现重连机制。
重连机制的原理是，在客户端与服务器连接中断时，客户端会尝试重新连接服务器。服务器可以设置 retry 字段，表示客户端重新连接的时间间隔。客户端在连接中断后，会等待 retry 指定的时间后再次尝试连接服务器。
以下是一个示例：
event: message data: Hello, SSE! retry: 5000
以上示例中，retry 字段的值为 5000，表示客户端在连接中断后，会等待 5 秒后再次尝试连接服务器。
示例代码
以下是一个使用 SSE 实现实时更新的示例代码：
服务器端代码
-- -------------------- ---- -------
----- ---- - ----------------
----------------------- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
-------------- -- -
----- ---- - --- ----------------------------
----------------- -------------- --------------
-- ------
----------------以上代码创建了一个 HTTP 服务器，每隔 1 秒向客户端发送一个名为 message 的事件，事件的消息内容为当前时间。服务器将事件流的 MIME 类型设置为 text/event-stream，并设置缓存控制和连接保持等参数。
客户端代码
const eventSource = new EventSource('http://localhost:3000');
eventSource.addEventListener('message', (event) => {
const data = event.data;
console.log(data);
});以上代码创建了一个 EventSource 对象，监听服务器的事件流。当客户端接收到名为 message 的事件时，将事件的消息内容输出到控制台。
总结
本文介绍了 SSE 的数据格式及处理方法，包括事件流、消息格式、事件类型、重连机制等内容。SSE 可以用于实现实时更新、实时通知等功能，具有很高的实用价值。读者可以根据本文提供的示例代码，深入学习 SSE 的使用方法，进一步提升前端开发技能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65dccade1886fbafa4a20f8b