一、背景
在前端开发中，时常需要实现实时数据推送的场景，例如在线聊天、股票行情等交互。传统的方式是使用 WebSocket 进行数据通信，但是在某些场景下 WebSocket 并不是首选方案，例如需要在浏览器端触发通信请求、服务器端推送数据等情况下。在这种情况下，Server-Sent Events（简称 SSE）便能够派上用场。
Server-Sent Events 是一种 Web 技术，它允许服务器通过 HTTP 协议向客户端发送事件流（即一系列数据更新）。事件流是具有高度可配置性的文本数据流，它基于纯文本数据格式，并且易于使用和实现。
二、如何在 Express 中使用 SSE
下面是一个基于 Express 框架实现 SSE 的示例：
2.1 安装必要的依赖
--- ------- ------- ------
2.2 创建一个 SSE 路由
----- ------- - -------------------
----- ------ - -----------------
--------------------- ----- ---- -- -
-- ----- ------------ - ------------------------- -----
----------------------------- ---------------------
------------------------------ ------------
--------------------------- --------------
-- ----------
---------------------
-- --------- -- ------
----- ------- - -------------- -- -
---------------- ------------------ -------- ------ ---- ----------
-- ------
-- ---------------
--------------- -- -- -
-----------------------
---
---
-------------- - -------2.3 将 SSE 路由挂载到 Express 应用中
----- ------- - ------------------- ----- --------- - ----------------------- ----- --- - ---------- ----- ---- - ----- ------------ ----------- ---------------- -- -- - ------------------- ------- -- --------------------------- ---
上面的代码中，首先在 SSE 路由中设置了相应头，然后通过 setInterval 函数定时向客户端推送数据。同时也监听客户端连接断开时的事件，清除定时器。最后在应用中挂载 SSE 路由。
三、演示
在浏览器中访问 http://localhost:3000/stream，可以看到每秒钟浏览器都会接收到一次推送数据。
四、总结
本文通过介绍 Server-Sent Events 技术，并结合示例代码演示了如何在 Express 框架中实现实时数据推送功能。相比于 WebSocket，SSE 更加轻量级，易于实现和扩展，在某些场景下可以作为一种合适的方案。
最后要注意的是，在实现 SSE 中需要注意设置正确的响应头，确保客户端能够正确解析数据，并且需要合理地管理定时器等资源，避免资源泄露和性能问题。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64dfedaef6b2d6eab3b17640