什么是 SSE
SSE (Server-Sent Events) 是一种 HTML5 技术，它允许服务器端向客户端发送事件流，客户端可以通过监听这些事件流来获取服务器端的实时更新。SSE 使用标准的 HTTP 协议，不需要像 WebSocket 一样建立新的连接，因此 SSE 相对于 WebSocket 更加轻量级和易于实现。
SSE 的优势
使用 SSE 技术可以实现以下优势：
实时通知：SSE 可以让服务器实时向客户端发送事件流，客户端可以及时处理这些事件，实现实时通知的效果。
简单易用：SSE 使用标准的 HTTP 协议，不需要建立新的连接，因此相对于 WebSocket 更加轻量级和易于实现。
兼容性好：SSE 技术是 HTML5 标准的一部分，因此现代浏览器都支持 SSE。
SSE 的应用场景
SSE 技术可以应用于以下场景：
实时消息通知：比如在线聊天、实时监控等场景。
服务器端维护：比如服务器端状态监控、日志推送等场景。
数据更新：比如股票行情、天气预报等实时数据更新场景。
SSE 的实现方法
服务器端实现
服务器端需要实现以下步骤：
- 在 HTTP 响应头中添加 Content-Type 和 Cache-Control 字段，告诉客户端这是一个 SSE 事件流。
------------- ----------------- -------------- --------
- 向客户端发送 SSE 事件流，每个事件流包括以下字段：
------ ---- ----- ---- --- -- --
其中，event 表示事件名称，data 表示事件数据，id 表示事件 ID。
例如，服务器端可以向客户端发送一个名为 "message" 的事件：
------ ------- ----- ------ ------
客户端实现
客户端需要实现以下步骤：
- 创建一个 EventSource 对象，指定服务器端的 SSE 接口地址。
--- ------ - --- --------------------
- 监听服务器端发送的事件流，使用 onmessage 事件处理函数来处理事件流。
---------------- - --------------- - ------------------------ --
SSE 示例代码
以下是一个简单的 SSE 示例代码，服务器端使用 Node.js + Express 实现，客户端使用 HTML + JavaScript 实现。
服务器端代码
----- ------- - -------------------
----- --- - ----------
--------------- ----- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
---
-------------- -- -
----- ---- - --- ----------------------------
---------------- --------------
-- ------
---
---------------- -- -- -
------------------- ------- -- ---- -------
---客户端代码
--------- -----
------
------
---------- ------------
-------
------
------- ---------
---- ------------------
--------
--- ------ - --- --------------------
---------------- - --------------- -
--- ------ - ----------------------------------
---------------- -- ---------- - -------
--
---------
-------
-------总结
SSE 技术可以实现实时通知、简单易用、兼容性好等优势，适用于实时消息通知、服务器端维护、数据更新等场景。通过以上示例代码，我们可以了解 SSE 的实现方法，并可以在实际项目中应用 SSE 技术。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6602cf54d10417a222ea35e9