什么是 SSE
SSE（Server-Sent Events）是一种基于 HTTP 的协议，用于服务器向客户端发送事件流的技术。它提供了一种非常简单的方式，让服务器向客户端推送实时的数据更新，而不需要客户端不断地轮询服务器。
SSE 与 WebSocket 类似，但是它们的用途略有不同。WebSocket 是一种双向通信协议，可以在客户端和服务器之间建立一个长连接，用于双方之间的实时通信。而 SSE 则适用于服务器向客户端单向推送实时数据更新的场景。
如何使用 SSE
在前端页面中使用 SSE，需要创建一个 EventSource 对象，并指定一个 URL，用于从服务器获取事件流。当服务器有数据更新时，会向客户端发送一个事件，客户端通过监听事件，即可获取到服务器发送的数据。
以下是一个简单的 SSE 示例：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------- --------------
-------
------
--- ---------------
--------
----- ---- - --------------------------------
----- ------ - --- ------------------------
---------------------------------- ----- -- -
----- ---- - -----------------------
----- -- - -----------------------------
-------------- - -------------
---------------------
---
---------
-------
-------在上面的示例中，我们创建了一个 EventSource 对象，并指定了一个 URL /updates，用于从服务器获取事件流。当服务器有数据更新时，会向客户端发送一个 message 事件，我们通过监听 message 事件，即可获取到服务器发送的数据，并将其添加到列表中。
在服务器端，我们需要设置一个 HTTP 接口，用于向客户端发送事件流。以下是一个简单的 SSE 服务器示例：
-- -------------------- ---- -------
----- ---- - ----------------
----------------------- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
-------------- -- -
----- ------- - ---------------- -------- --- -------------------- ---
----------------- -------------- -----------------
-- ------
----------------在上面的示例中，我们创建了一个 HTTP 服务器，并设置了一个 /updates 接口，用于向客户端发送事件流。在每秒钟内，我们向客户端发送一个 message 事件，并将当前时间作为数据发送给客户端。
SSE 的优势
相比于轮询和 WebSocket，SSE 有以下优势：
- 简单易用：SSE 使用 HTTP 协议进行通信，不需要像 WebSocket 那样建立一个长连接，因此使用起来非常简单。
- 广泛支持：SSE 被现代浏览器广泛支持，不需要像 WebSocket 那样需要特殊的服务器支持。
- 低延迟：SSE 可以实现实时数据更新，尤其对于需要频繁更新的场景，SSE 的性能比轮询更高。
- 可维护性好：SSE 可以让服务器向客户端推送实时的数据更新，而不需要客户端不断地轮询服务器，降低了服务器的压力，也提高了代码的可维护性。
总结
本文介绍了 SSE 技术，并提供了一个简单的 SSE 示例。相比于轮询和 WebSocket，SSE 具有简单易用、广泛支持、低延迟和可维护性好等优势，适用于需要实时数据更新的场景。在实际开发中，可以根据具体场景选择合适的技术，以达到最佳的性能和用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/662f093dd3423812e4d0020c