Server-sent Events (SSE) 是一种基于 HTTP 协议的实时消息推送技术，它允许服务器端通过 HTTP 连接向客户端发送事件流，客户端通过监听这些事件流来实现实时更新 UI 界面。SSE 在实时消息推送、推送通知、实时信息流等方面有着广泛的应用，下面我们将详细讲解如何使用 SSE 实现实时消息推送。
SSE 的工作原理
SSE 技术基于 HTTP 长轮询（long-polling）实现，具体工作流程如下：
客户端通过 HTTP 连接请求 SSE 流，请求头中包含
Accept: text/event-stream。服务端接收到请求后，保持连接不断开，开始发送事件流数据，每条数据以
data:开始，以\n\n结尾，中间以data:换行分隔。示例：----- ----------- ------- ------------
客户端接收到事件流数据后，触发
EventSource的onmessage事件回调函数，更新 UI 界面。如果网络连接断开，客户端会自动重新发起 SSE 连接请求，这一过程由
EventSource自动处理。
使用 SSE 推送消息的示例代码
前端使用 SSE 实现实时消息推送的代码如下：
----- ----------- - --- ----------------------------- --------------------- - ------- -- - -- ---------- - --- -------- ----- ------- - ------------------------------- -- -- -- -- ------------------ --
其中 /sse-endpoint 是 SSE 接口的 URL，根据具体后端框架的实现方式而定。
后端实现 SSE 接口的示例代码（Node.js + Express）如下：
----- ------- - -------------------
----- --- - ----------
------------------------ ----- ---- -- -
-- -------- ---- --- -----------------
---------
--------------- --------------------
------------- -------------
---------------- -----------
------------------------------ ---
---
-- ----- - -----------
-------------- -- -
----- ------- - ---------------- -------- ------- ------- ---
---------------- -----------------
-- ------
---
---------------- -- -- ------------------- ------- -- ---- --------SSE 的优缺点
优点：
- 实现简单，只需要一个 HTTP 连接即可实现实时消息推送。
- 兼容性好，除了 IE 浏览器之外，其他现代浏览器均已支持 SSE 技术，而且无需额外的插件或扩展。
- 安全性好，基于浏览器自身的同源策略，只有服务端与客户端同源之后才能建立 SSE 连接，防止 XSS 等攻击。
- 实时性好，SSE 可以保持长时间的连接状态，只有在网络断开等异常情况下才需要重新建立连接，即时性高。
缺点：
- 长时间保持连接会对服务器资源造成压力。
- SSE 无法支持浏览器端向服务器端发送消息，仅能由服务器端向浏览器端推送消息。
- SSE 无法处理大量数据，适合处理轻量级的实时消息。
总结
通过本文的介绍，我们了解了 SSE 技术的工作原理、使用方法和优缺点，并提供了前后端相应的示例代码。在实际开发中，我们可以根据业务需求选择适合的技术方案，如基于 WebSocket、MQTT 等实现更复杂的实时数据传输功能。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6460a9a4968c7c53b024e940