在现代 Web 应用程序中，实时更新已成为一种必不可少的功能。WebSockets 是实现此类功能的受欢迎的方式，但是在某些情况下，它可能会比 Server-sent Events (SSE) 更重。本篇文章将介绍如何使用 SSE 在前端实时展示在线人数。
理解 Server-sent Events
SSE 是一种 HTTP 推送技术，它允许服务器主动向客户端推送数据。在 SSE 中，服务器将数据打包成一个或多个事件消息，并将其推送到客户端。客户端使用 EventSource 构造函数创建 SSE 对象来接收来自服务器的事件消息。
SSE 的好处是它使用标准的 HTTP 协议，无需WebSocket 的复杂性，而且 SSE 对于有状态的服务器应用程序非常有用。当客户端连接到服务器时，服务器可以将有关客户端的状态信息推送到客户端，从而更新客户端的状态。
开始实现
让我们来完成使用 SSE 实时展示在线人数的示例。假设我们有一个在线聊天室，在页面的顶部展示当前在线用户数量。
服务器端
我们需要一个 route（路由）来处理客户端 SSE 请求。我们使用 Node.js 和 Express 来创建我们的服务器端，由于我们只需要监听一个路由，我们可以使用 Express 轻松地实现它。
-- -------------------- ---- -------
----- ------- - -------------------
----- --- - ----------
----- ---- - ----------------------------------
-------------------------------- - ------------
------------------ ----- ---- -- -
----------------------------- ---------------------
------------------------------ ------------
----- ---------- - -------------- -- -
---------------- ------------------------------ ------------------------ - -------------
-- ------
--------------- -- -- -
--------------------------
---
---上面就是 SSE 的服务器端实现代码，在一些浏览器中，SSE 要求服务器使用 text/event-stream 标头而不是普通的 text/plain 返回响应内容。我们需要为此添加以下标头：
res.setHeader('Content-Type', 'text/event-stream');另外，为了避免浏览器缓存 SSE 数据，我们还需要添加以下标头：
res.setHeader('Cache-Control', 'no-cache');在发送 SSE 时，每个事件消息应该以两个换行符作为结尾。最后，在连接关闭时，我们需要使用回调函数停止 SSE 定时器。
客户端
我们需要在客户端中创建一个新的 EventSource，将其连接到我们的 SSE 路由，并接收由服务器发出的事件消息。这里是示例代码：
-- -------------------- ---- -------
--------- -----
----- ----------
------
------------- -------------
-------
------
---------- ----------
-- ----------------------
------- -----------------------
----- ------------------ - ----------------------------------------
----- ----------- - --- -----------------------
--------------------- - ------- ------- -- -
----- - ----------- - - ------------------
---------------------------- - ------- ------ ----------------
--
---------
-------
-------我们为了创建 EventSource 连接，将其连接到 /stream 路由（我们在服务器端定义了这个路由）并接收服务器传输的数据。
在 onmessage 事件处理程序中，我们提取的 onlineUsers 属性值并更新页面。
启动应用程序
我们有了服务器代码和客户端代码，现在可以启动我们的应用程序以进行测试。在终端中输入以下命令来启动服务器：
node app.js
打开浏览器，访问 http://localhost:3000。在页面顶部，您应该可以看到当前在线用户的数量实时更新。
结论
使用 SSE 在前端实时显示在线用户的数量非常简单，使用 SSE 的好处是它对于有状态的服务器应用程序非常有用。我们的示例应用程序使用 Node.js 和 Express，但是所有的 Web 服务器都可以实现 SSE。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6774ec726d66e0f9aaf1c4ad