在现代的 Web 应用中，实时数据的展示变得越来越重要。例如，在一个在线聊天应用中，我们需要实时展示用户的在线状态和当前在线人数。实现这样的功能需要使用实时通信技术。而其中一种实现方式就是使用 Server-Sent Events。
什么是 Server-Sent Events
Server-Sent Events（简称 SSE）是一种基于 HTTP 的实时通信技术，它允许服务器向客户端推送数据。与 WebSocket 不同，SSE 只能从服务器向客户端推送数据，而客户端无法主动向服务器发送数据。SSE 使用了一种称为“事件流”的格式，可以将多个事件发送到客户端，并且客户端可以通过监听事件流来获取实时数据。
SSE 的优点
相比于其他实时通信技术，SSE 具有以下优点：
- 易于实现：SSE 是基于 HTTP 的，因此它不需要像 WebSocket 那样建立一个全双工的通信通道。这使得 SSE 的实现更加简单。
- 兼容性好：SSE 可以在所有现代浏览器中使用，而且不需要像 WebSocket 那样进行特殊的协议升级。
- 可靠性高：SSE 使用了 HTTP 的长连接机制，因此它可以保证数据的可靠性和稳定性。
- 低延迟：相比于轮询技术，SSE 可以实现更低的延迟，因为它只在有数据时才会发送数据到客户端。
实现实时人数在线状态展示
下面我们将使用 SSE 技术来实现一个实时人数在线状态展示的功能。
服务端实现
服务端使用 Node.js 和 Express 框架来实现。我们需要创建一个路由来处理 SSE 请求，并且在路由中发送事件流。
----- ------- - -------------------
----- --- - ----------
--------------- ----- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
-------------- -- -
----- ---- - -
------------ ------------------------ - -----
------------ --------- -------- --------
--
----------------- -----------
---------------- ------------------------------
-- ------
---
---------------- -- -- -
------------------- ------- -- ---- -------
---在上面的代码中，我们创建了一个 GET 请求路由 /sse，并且设置了响应头，指定了 MIME 类型为 text/event-stream，并且设置了缓存控制和长连接。然后我们使用 setInterval 定时向客户端发送事件流。事件流使用了 event 和 data 字段，其中 event 字段指定了事件类型，data 字段指定了事件数据。在本例中，我们使用了事件类型 update，并且发送了一个包含在线人数和在线用户列表的 JSON 数据。
客户端实现
客户端使用 JavaScript 来实现。我们可以使用 EventSource 对象来监听事件流，并且在收到事件时更新页面上的数据。
--------- -----
------
------
----- ----------------
---------------- ---- ----- --- ------ --------------
-------
------
------------- ---- ----- --- ------ -----------
--------- ------ ----- ----------------------------
--------- ------ ----- ----------------------------
--------
----- ----------- - --- --------------------
----- ------------------ - ---------------------------------------
----- ------------------ - ---------------------------------------
-------------------------------------- ------- -- -
----- ---- - -----------------------
---------------------------- - ------------------------ ---
---------------------------- - -----------------
---
---------
-------
-------在上面的代码中，我们使用 EventSource 对象来连接到服务端的 SSE 路由，然后使用 addEventListener 方法来监听事件流。在事件处理函数中，我们解析事件数据，并且更新页面上的在线人数和在线用户列表。
运行示例
我们可以使用以下命令来运行示例：
- --- ------- ------- - ---- ------
然后在浏览器中打开 http://localhost:3000，就可以看到实时人数在线状态展示的效果了。
总结
Server-Sent Events 是一种非常实用的实时通信技术，它可以帮助我们实现实时数据的展示和更新。在本文中，我们介绍了 SSE 的优点和原理，并且使用 Node.js 和 Express 框架来实现了一个实时人数在线状态展示的示例。希望本文可以对你理解 SSE 技术有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6603cb4ad10417a22204621d