在现代 Web 应用中，实时数据是至关重要的。对于类似于 CMS（内容管理系统）这样的应用程序来说，实时数据更新是至关重要的，但是传统的轮询方式并不是最佳解决方案。这就是为什么使用 Server-Sent Events（SSE）可以帮助我们实现可靠的 CMS 文章实时推送的原因。
SSE 是一种服务器到客户端的单向通信机制，它允许服务器以流的形式向客户端发送事件更新。这种机制非常适合传输事件流数据，如 CMS 文章的实时更新。在这篇文章中，我们将介绍 SSE 并展示如何使用 SSE 实现可靠的 CMS 文章实时推送。
什么是 Server-Sent Events？
Server-Sent Events 实际上是一种基于 HTTP 协议的技术。它利用了 HTTP/1.1 协议中的持久化连接机制，也就是利用浏览器和服务器之间建立的一个长连接，并且服务器使用该连接不断地向客户端推送事件。
SSE 的关键点在于：客户端不像传统的 Ajax 轮询那样需要不断地请求服务器来获取最新的数据。相反，SSE 允许服务器主动推送数据到客户端。这种机制大大减少了请求的数量，也更加及时、实时。
SSE 的工作原理
在 SSE 中，客户端和服务端之间会建立一个持久连接，这个连接会一直保持开启，直到服务器或者客户端显式地关闭它。
当客户端想要接收数据时，它只需要通过向服务器发送 HTTP 请求，但是这个请求需要包含一个专门的头信息 Accept: text/event-stream 。如果服务器支持 SSE 机制，那么它会立即返回一个 HTTP 响应，并且将响应的 Content-Type 设置为 text/event-stream，这样客户端就知道接下来的数据是一个 SSE 流了。
在建立连接后，服务器就可以向客户端发送各种类型的事件更新。每个事件都必须包含一个具有唯一 ID 的标识符字段，以及一个描述事件数据的数据字段。这样客户端就可以根据事件 ID 匹配新的事件更新。
SSE 的消息格式如下：
event: messageEvent
data: { "message": "Hello world!" }在这个消息中，event 字段表示事件名称，data 字段表示事件数据。在客户端收到这个消息后，它会解析并处理事件，这样就可以更新 CMS 上的文章数据了。
在 Node.js 中使用 SSE
现在我们已经了解了 SSE 的工作原理，让我们进入 Node.js，开始使用 SSE 来实现可靠的 CMS 文章实时推送。
服务端实现
服务器实现的关键是建立 SSE 的连接，你可以使用 Node.js 的 http 模块来创建 HTTP 服务器。以下是一个基本的 Express 服务器示例：
-- -------------------- ---- ------- ----- --- - --------------------- ----- ---- - ---------------------------------- ------------ ----- ---- -- - ---------------------- - --------------- --- ----------------- -- -- - ---------------------- -- --------- ---
这个服务器的作用是使用 Express 来处理来自客户端的 HTTP GET 请求。如果使用主页 URL，将返回一个 HTML 页面。接下来，我们需要使用 SSE 将文章数据推送给客户端。
关键的后端代码如下：
-- -------------------- ---- -------
------------------ ----- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
----------- ------------
---
-------------- -- -
----- ---- - --- ----------------------------
---------------- --------------
-- ------
---这里我们使用 setInterval 来定期向客户端发送时间数据。res.write 方法是将数据写入响应流中，并使用 data 字段将数据作为 SSE 事件发送给客户端。
客户端实现
现在我们已经成功地在服务端实现了 SSE。接下来，我们将使用 JavaScript 来编写一个客户端，以便在客户端上实现实时更新。
首先，我们需要创建一个新的 EventSource 对象：
const source = new EventSource('/events');
source.onmessage = event => { console.log(event.data) }当客户端发起连接请求时，我们使用 EventSource 来连接到发出 /events 这个 SSE 响应的服务器端。source.onmessage 方法被用于处理接收到的事件，这里我们只是将事件数据输出到控制台。
全部示例代码
以下是完整的代码示例，展示了如何使用 SSE 在 CMS 中实现可靠的实时推送：
-- -------------------- ---- -------
----- --- - ---------------------
----- ---- - ----------------------------------
------------ ----- ---- -- -
---------------------- - ---------------
---
------------------ ----- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
----------- ------------
---
-------------- -- -
----- ---- - --- ----------------------------
---------------- --------------
-- ------
---
----------------- -- -- -
---------------------- -- ---------
----- -------------------- ---- -------
--------- -----
------
------
---------- ----------------
----- --------------- --
-------
------
--------
----- ------ - --- -----------------------
---------------- - ----- -- - ----------------------- -
---------
-------
-------结论
在本文中，我们介绍了 Server-Sent Events，并展示了如何在 CMS 中使用 SSE 实现文章更新的实时推送。通过 SSE，我们可以减少轮询的请求量，并且享受更加实时的数据更新体验。希望这篇文章可以帮助你更好地理解 SSE 并在实践中使用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66fbb486447136260160e036