随着 Web 应用程序的发展，前端技术变得越来越先进和复杂。在这些应用中，实时反馈对于提升用户体验和增强互动性非常重要。Server-Sent Events（SSE）是一种 Web 技术，可以使用它在应用程序中实现实时更新，并在连续连接上推送数据。SSE 是建立在 HTTP 协议之上，具有如下优点：
- SSE 是基于 HTTP 的，因此它能够与现有的 Web 技术轻松集成。
- SSE的长轮询机制使得客户端可以保持打开的连接，无需不断地发送HTTP请求以获取数据，降低网络负载。
- SSE 支持跨域通信。
SSE 的基本原理
SSE 通过 HTTP 连接向客户端推送数据。服务器端使用 "text/event-stream" MIME 类型返回格式化的数据， 客户端通过创建一个 EventSource 对象来监听这些事件：
--- ------ - --- -----------------------
当数据被服务器更新时，事件源会自动触发 message 事件。客户端浏览器可以捕捉这个事件，并执行 JavaScript 回调函数来处理它：
---------------- - --------------- - ------------------------ --
在服务器方面，按照 SSE 规范，需要在 HTTP 响应头中设置 "text/event-stream" MIME 类型，以及发送一个 HTTP 消息流，每条消息使用如下格式：
------ --------- ----- ----------- ------ -----------
其中 "event" 是可选的，用于标识消息类型。"data" 包含消息内容，多条消息之间使用一个空行分割。
SSE 实现示例
假设我们有一个简单的用于跟踪在线用户的 Web 应用程序，为了实时更新在线用户数量，可以使用 SSE 来实现实时反馈。以下是一些示例代码：
- 服务器端
-- ------
--- ------- - -------------------
--- ---- - ----------------
--- --- - ----------
-- --------
--- ----------- - --
-- --------
----------------------- -------- ----- ---- -
-- -- ---
----------------------------- ---------------------
------------------------------ ------------
--------------------------- --------------
-- ------
-------- ------------------- -
----------------- ----------------------
---------------- - - ---------------- ------------ ----------- -- - --------
-
-- ----------
--- --------------- - ------------------------------ ------
-- ------------
--------------- ---------- -
-------------------------------
---
---
-- --------
-------- ---------------------- -
--- ----- - --
-- ---- -----------
------ ------
-
--- ------ - -----------------------
------------------- -------- -- -
------------------- -- --------- -- ---- -------
---- 客户端
--------- -----
------
------
----- ----------------
---------- ------------
-------
------
---- -----------------------
--------
--- --------------- - ---------------------------------------
-- -- --- --
--- ------ - --- ----------------------------
---------------- - --------------- -
--- ---- - -----------------------
------------------------- - -------- - -----------------
--
---------
-------
-------在这个示例中，服务器端使用 Express 框架并通过 HTTP 提供服务，使用 SSE 将在线用户数量实时返回给客户端。客户端使用 JavaScript 监听这些事件，以便在接收到服务器端的更新时，更新应用程序界面上显示的在线用户数量。
总结
SSE 是一个非常强大的技术，可以轻松实现实时反馈，并且与现有 Web 技术轻松集成。在开发 Web 应用程序时，使用 SSE 可以让你的应用程序获得更好的用户体验和互动性。希望这篇文章能够让你更好地理解 SSE，并在实际项目中得到应用。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/653388d47d4982a6eb715d2c