如何使用 SSE 实现后台主动推送消息到前端页面
在前端开发的日常工作中，我们经常需要向页面中主动推送消息。通常，我们采用轮询的方式来实现消息的推送。但是，轮询的方式在一定程度上会增加服务器负载，效率较低，而使用 SSE （Server-Sent Events） 可以更加高效、方便地实现后台主动推送消息到前端页面。本文将详细介绍 SSE 原理以及如何使用 SSE 实现后台主动推送消息到前端页面。
一、SSE 原理
SSE 是一种服务器向客户端推送事件的方式。相较于传统的轮询方式，SSE 可以更加高效、方便地实现数据的推送。SSE 的实现原理如下：
首先，客户端通过监听一个特定的 URL（一般是 /eventsource 或 /sse）来建立与服务器的连接。
连接建立成功后，服务器向客户端发送一个 HTTP 响应头，头信息包含 Content-Type 和 Cache-Control 两个字段，其中 Content-Type 的值为 text/event-stream ，而 Cache-Control 的值为 no-cache 。
服务器通过不断向客户端发送数据流的方式，将需要推送到前端的消息发送给客户端。数据以一行一行的字符串的形式发送，每行字符串都以 \n 结尾。
客户端通过 addEventListener 方法监听数据流，当有新的数据到来时，就会触发 message 事件，从而实现数据的更新。
二、SSE 使用方法
在使用 SSE 实现后台主动推送消息到前端页面时，需要按照以下步骤进行操作：
- 建立连接
在客户端中，可以通过以下方式建立与服务器的连接：
const eventSource = new EventSource('/eventsource')其中，/eventsource 是服务器端用来监听事件的 URL，可以根据具体情况进行修改。
- 接收数据
接收数据的操作也很简单，只需要使用 addEventListener 方法监听 message 事件即可：
eventSource.addEventListener('message', (event) => {
console.log(`Received event: ${event.data}`)
})其中，event.data 表示接收到的数据，可以根据实际情况进行处理。
- 发送数据
在服务器端，可以根据需要随时向客户端发送数据，数据格式如下：
res.write(`data: ${JSON.stringify(data)}\n\n`)其中，data 表示需要发送的数据，可以根据实际情况进行处理。注意，每个数据以一行一行的字符串的形式发送，每行字符串都以 \n 结尾。
- 关闭连接
当不再需要使用 SSE 时，可以通过关闭连接来释放资源：
eventSource.close()
三、示例代码
下面是一个使用 SSE 实现后台主动推送消息到前端页面的示例代码：
服务器端代码：
-- -------------------- ---- -------
----- ---- - ---------------
-- -- ---- ---
----- ------ - ----------------------- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
--
-- --------------
-------------- -- -
----- ---- - -
----- --- ----------------------------
-------- ------- -----
-
---------------- -----------------------------
-- -----
--
------------------- -- -- -
------------------- -- ------- -- -----------------------
--客户端代码：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
---------- ---------------
-------
------
--------------- ------ ------------
---- --------------------
--------
----- ----------- - --- ---------------------------
--------------------------------------- ------- -- -
----- ---- - ----------------------
----- ------- - ------ ------------- -------- ----------------
----- -------- - -----------------------------------
------------------ -- -------------------
--
------------------------------------ ------- -- -
----------------------- --------------
--
------------------------------------- ------- -- -
-------------------- --------- -- ------
--
---------
-------
-------在运行代码后，我们可以看到每秒钟会向客户端推送一个消息，客户端也能够实时接收到推送的消息。
四、总结
通过本文的介绍，我们可以发现，使用 SSE 实现后台主动推送消息到前端页面是一种高效、方便且灵活的方式。相较于轮询方式，SSE 可以降低服务器负载，提高效率。同时，SSE 也非常易于使用，只需要简单的几个步骤就可以实现。因此，在实际项目中，我们可以考虑使用 SSE 来实现后台主动推送消息到前端页面。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/654d9f287d4982a6eb70b2c6