Server-Sent Events（服务器推送事件）是一种用于实时接收服务器发送的数据的Web API。它允许服务器通过 HTTP 连接向客户端推送事件，而不需要客户端不断地轮询服务器。这种实时性的应用场景非常广泛，例如社交媒体的新消息通知、在线游戏的实时数据更新等。在本篇文章中，我们将深入了解 Server-Sent Events 事件流的格式及解析方法，并提供相关示例代码。
格式
Server-Sent Events 事件流的数据格式非常简单，它由以下 3 部分组成：
- event: 事件名称（可选）
- data: 事件数据（可选）
- retry: 重试时间（可选）
每个事件流消息通过一个“\n\n”（即两个换行符）分隔。
以下是一个示例 Server-Sent Events 事件流的格式：
-- -------------------- ---- ------- ------ ------------ ----- ------------- ---------------------- -------- ------ ------------ ----- -------------------------------- ------ ----- ---------- ------- ------ -----
在上面的示例中，第一个事件的名称是“chat-message”，数据是一个包含用户和消息的JSON对象；第二个事件的名称是“stock-update”，数据是一个包含股票代码和价格的JSON对象；第三个事件没有指定名称，数据是一个用于保持连接的消息；第三个事件还包含一个重试时间，表示客户端在尝试重新建立连接前等待的毫秒数。
解析方法
Server-Sent Events 事件流的解析非常简单。在客户端，我们可以使用 JavaScript 中的 EventSource 对象来接收事件流。以下是一个简单的示例代码：
-- -------------------- ---- ------- --- ------ - --- ----------------------- --------------------------------------- --------------- - --- ---- - ----------------------- --------------------- - -- - - -------------- --- --------------------------------------- --------------- - --- ---- - ----------------------- ----------------------- - -- - - ------------ ---
在上面的代码中，我们创建了一个 EventSource 对象，并指定了一个事件流的URL（例如“/stream”）。我们还使用 addEventListener 方法为两个事件注册了回调函数，分别用于处理“chat-message”和“stock-update”事件。
当客户端使用上述代码连接到服务器时，服务器将推送事件流数据。当客户端收到新的事件时，它会触发相应的回调函数，并将事件的数据作为参数传递给回调函数。在事件回调函数中，我们可以解析事件数据，并根据需要执行相应的操作。
指导意义
Server-Sent Events 提供了一种简单而有效的方式来实现实时数据传递。它比轮询服务器更有效率，因为前端不需要不断地发送请求来检查是否有新数据。它也比 WebSockets 更轻量级，因为它不需要建立一条全双工通信的通道。
Server-Sent Events 可以应用于许多实时性的应用场景，包括社交媒体的新消息通知、在线游戏的实时数据更新等。它还可以用于监测服务器端的活动，例如打印日志或实时推送服务器端错误信息。
在使用 Server-Sent Events 时，需要注意以下几点：
- 服务器端必须支持 Server-Sent Events 的推送功能。
- 长时间保持连接可能会对服务器端和客户端产生影响，因此需要在使用中进行优化。
- 前端需要处理连接的异常情况，并重新建立连接。
- 事件名称应该定义清晰，并与后端的事件生成器保持一致。
在开发中，我们可以使用第三方的 Server-Sent Events 库（例如 EventSource.js）来简化事件流的处理。
示例代码
以下是一个简单的 Node.js HTTP 服务器示例代码，用于实现 Server-Sent Events 事件流：
-- -------------------- ---- -------
--- ---- - ----------------
-------------------------- ----- ---- -
-- ------------
------------------ ---------------- ----------------------
-- -------
---------------------- -
---------------- - - --- ------ - --------
-- ------
--------------- -------------
------------------- ------- -- -------------------------在上面的代码中，我们创建了一个HTTP服务器，并使用“text/event-stream”告诉浏览器这是一个事件流。我们还使用 setInterval 定期发送事件流数据，以模拟实时数据更新。
要使用上述代码，只需在命令行中运行以下命令：
$ node server.js
在浏览器中访问“http://127.0.0.1:3000/”，即可看到接收到的事件数据。
以下是一个简单的 HTML 页面示例代码，用于接收 Server-Sent Events 事件流：
-- -------------------- ---- -------
--------- -----
------
------
------------------ ------ ------------
-------
------
--------
--- ------ - --- -----------------------
---------------- - --------------- -
--- ------- - -----------
--------------------------------------------- -- ------- - -------
--
---------
---- --------------------
-------
-------在上面的代码中，我们使用 JavaScript 创建了一个 EventSource 对象，并指定了一个事件流的URL（例如“/stream”）。我们还为 EventSource 对象的 onmessage 事件注册了一个回调函数，用于将接收到的事件数据添加到页面中。
要使用上述代码，将其保存为“index.html”文件，并将其与上述 Node.js 服务器的代码置于同一目录中。然后在浏览器中访问“http://127.0.0.1:3000/index.html”，即可看到实时接收到的事件数据。
总结
Server-Sent Events 是一种用于实时接收服务器发送的数据的Web API。它主要由事件名称和事件数据组成，并可以设置重试时间（可选）。在前端中，可以使用 JavaScript 中的 EventSource 对象来接收事件流。Server-Sent Events 可以应用于许多实时数据传递的场景，并可以与第三方库（例如 EventSource.js）一起使用，以简化处理过程。在使用 Server-Sent Events 时，需要注意优化连接效率，处理异常情况，并定义清晰的事件名称。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64de98b1f6b2d6eab39c5f0a