随着 Web 应用逐渐从传统的多页面应用转变成单页面应用，实时性越来越成为开发者关注的焦点。Server-Sent Events（SSE）是一种实时通信协议，它允许浏览器与服务器之间保持长连接，实现单向的、从服务器向客户端的实时通信。在 Express 中，使用 SSE 可以实现各种实时性需求，包括但不限于异步通知、实时数据推送等。本文将介绍 SSE 在 Express 中的应用场景、使用技巧以及示例代码。
应用场景
SSE 可以应用在如下场景中：
- 异步更新：通过 SSE，服务器可以向客户端发送异步更新通知，浏览器端的 UI 可以即时响应。
- 实时数据推送：SSE 可以用于将实时数据（比如交易数据、股票数据等）从服务器推送到客户端。
- 实时聊天：SSE 可以将聊天信息从服务器实时推送到客户端。
技巧
Express 中启用 SSE
在 Express 中启用 SSE 非常简单。首先，我们需要使用 EventSource 对象建立一个 SSE 连接：
const eventSource = new EventSource('/events');然后，我们需要在服务器端创建一个路由，用于处理 SSE 请求：
-- -------------------- ---- -------
------------------ ----- ---- -- -
----------------------------- ---------------------
------------------------------ ------------
----- ---------- - -------------- -- -
---------------- ----- ----------------------------
-- ------
--------------- -- -- -
--------------------------
---
---在服务器端，我们将响应头 Content-Type 设置为 text/event-stream，告诉浏览器这是一个 SSE 响应。然后，我们启动一个定时器，每隔一段时间向客户端发送一条 SSE 消息。最后，我们监听请求的 close 事件，停止定时器。
发送 SSE 消息
服务器端发送 SSE 消息的格式如下：
event: <event-name> data: <event-data>
其中 event-name 是一个字符串，表示消息的类型，event-data 是一个字符串，表示消息的内容。我们可以在客户端通过 EventSource 对象监听 message 事件来接收 SSE 消息：
eventSource.addEventListener('message', (event) => {
console.log(event.data);
});避免缓存
为了避免客户端缓存 SSE 响应，我们需要在响应头中设置 Cache-Control：
res.setHeader('Cache-Control', 'no-cache');处理 SSE 连接中断
如果客户端关闭了 SSE 连接，我们需要在服务器端停止定时器：
req.on('close', () => {
clearInterval(intervalId);
});示例代码
-- -------------------- ---- -------
----- ------- - -------------------
----- --- - ----------
------------ ----- ---- -- -
----------
--------- -----
------
------
---------- ---------------
-------
------
------- ------------
---- --------------------
--------
----- ----------- - --- -----------------------
--------------------------------------- ------- -- -
----- ----------- - ------------------------------------
--------------------- -- ---------- - -------
---
---------
-------
-------
---
---
------------------ ----- ---- -- -
----------------------------- ---------------------
------------------------------ ------------
----- ---------- - -------------- -- -
---------------- ----- ----------------------------
-- ------
--------------- -- -- -
--------------------------
---
---
---------------- -- -- -
------------------- ------- -- ---- -------
---总结
SSE 在 Express 中的应用场景非常广泛，可以用来实现各种实时性需求。在使用 SSE 时，我们需要注意避免客户端缓存和处理 SSE 连接中断。希望本文对您了解 SSE 在 Express 中的应用有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64fd26e395b1f8cacdcc013e