在 Web 开发中，我们经常需要服务器在客户端不断推送消息，以保证客户端实时更新。而 SSE（Server-Sent Events，服务器推送事件）是一种实现服务器端推送新闻事件到客户端的技术，在前端开发中发挥着很重要的作用。
SSE 与 WebSocket 不同，WebSocket 更适合于双向通信，可以用于传输任何数据类型，而 SSE 可以更高效地传输文本或二进制数据（如 JSON、XML、HTML 页面等），适用于单向通信的应用场景。
SSE 功能示例
在演示 SSE 功能之前，我们需要先了解一下 SSE 的两个概念：
EventSource 对象
在 SSE 中，客户端可以通过 JavaScript 的 EventSource 类创建 EventSource 对象，用于连接服务器。EventSource 对象是 SSE 核心 API 的一部分，它封装了服务器上的 EventStream，并在客户端通过 EventStream 与服务器进行消息通信。
EventStream
EventStream 是 SSE 中的数据传输方式，它是由多个 HTTP 数据包组成，每个数据包都含有一个或多个事件（event）和数据（data）。在客户端建立连接后，服务器端可以使用“Content-Type: text/event-stream”指令来告诉浏览器建立 EventSource 对象。
当 EventSource 对象建立连接后，服务器就可以通过 EventStream 推送消息到客户端。客户端通过 EventSource 对象的 onmessage 事件监听服务器推送的消息，从而进行相应的处理。
下面演示一个 SSE 推送新闻事件的例子：
-- ------ ----------- --------
--- ------ - --- ---------------------
-- -----------
---------------- - -------- ------- -
--- ---- - -----------------------
-- -----------------
--- ------- - --------------------------------
----------------- -- ------- - ---------- - ---------
--在上面的代码中，我们可以看到客户端通过 JavaScript 的 EventSource 类创建了 EventSource 对象，并连接到了服务器的 /news 接口。客户端通过监听 onmessage 事件，从服务器推送的消息中取出新闻事件的数据，并在页面上将推送的新闻事件显示出来。
接下来我们看一下服务端提供的 SSE 推送新闻事件接口的示例代码。假设我们已经有了一批新闻数据，我们可以通过 Node.js 的代码实现推送新闻事件的接口：
-- ---- --- ------
----- ---- - ----------------
----- ----------- - -----------------------
-- ----
----- -------- - -
- ------ --- --- -------- ------ - ---- --
- ------ --- --- -------- ------ - ---- --
- ------ --- --- -------- ------ - ---- --
--
----------------------- ---- -- -
-- -- ------------ - ---------------------- --- ----
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
-- ----------
--- - - --
-------------- -- -
--- ---- - ---------- - -----------------
--- ---- - ----------------------------
----------------- ----------- --------------
----
-- ------
----------------在上面的服务端代码中，我们创建了一个 Node.js 服务器，并设置 Content-Type 为 text/event-stream。在 setInterval 中，我们每隔 1 秒推送一条新闻事件到浏览器。推送的数据采用 querystring.stringift() 方法将 JSON 格式的新闻数据转化为字符串，然后使用 res.write() 方法通过 SSE 的数据传输方式向浏览器推送数据。
现在运行服务端代码，在浏览器中访问 http://localhost:8000，可以看到服务器通过 SSE 推送了新闻事件，实现了服务器端推送新闻事件到客户端的功能。
SSE 的优势与应用场景
相比于轮询的方式，SSE 的优势较为明显。首先 SSE 允许服务器向客户端推送消息，而轮询方式则需要客户端不断向服务器发送请求，从而占用服务器资源。
另外，SSE 中的 EventStream 比起 WebSocket 协议来说更加轻量级，因为它只能传输文本或二进制格式的数据。
在应用场景上，SSE 主要用于实现类似于即时通讯、新闻推送、股票资讯等单向通讯的场景，较少用于双向通讯的场景。
总结
SSE 技术是一种实现服务器端推送新闻事件到客户端的技术，通过 EventSource 对象和 EventStream，实现了服务器推送消息到客户端的功能。在应用场景上，SSE 主要用于单向通讯的场景，常见的应用场景有即时通讯、新闻推送、股票资讯等领域。
我们希望这篇文章能对你了解 SSE 技术以及实现服务器端推送新闻事件到客户端有所帮助！
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/652d30937d4982a6ebe9b5eb