在 Web 开发中，实时数据的显示一直是一个重要的问题。在传统的客户端-服务器模式中，客户端需要不断地向服务器发送请求，才能获取最新的数据，这不仅浪费带宽，也会增加服务器的压力。而使用 SSE（Server-Sent Events）技术可以解决这个问题，让 Web 应用能够实时地获取服务器上的数据。本文将介绍使用 SSE 技术实现实时 Web 应用的案例。
什么是 SSE？
SSE 是一种服务器向客户端推送事件的技术。它的原理是客户端通过基于 HTTP 的长连接，向服务器发送一个带特殊头部的请求，服务器在有数据更新时，通过该连接返回数据。SSE 相比起其他实时数据传输技术如 WebSocket，其优点在于使用简单，无需建立 TCP 连接，可以直接使用 HTTP 协议。
SSE 协议的格式如下：
event:事件名字\n data:数据\n retry:间隔时间\n\n
其中，event 表示事件名字，data 表示数据，retry 表示当断开连接后重新连接的时间间隔（可选）。
实时 Web 应用案例
在本案例中，我们将演示一个简单的实时 Web 应用，它能够实时地展示当前在线用户数，并且支持用户来到页面时自动上线。
服务器端
服务器端使用 Node.js 实现。我们定义了一个 /listen 路由，用于客户端建立 SSE 连接。在客户端请求过来时，服务器会新建一个 SSE 连接，将其放入一个数组里保存起来，随后发送一个 data 事件，将在线用户数发送给客户端。当有新用户来到时，服务器将在线用户数加一，并向所有连接发送一个 message 事件，将新的在线用户数发送给客户端。当一个 SSE 连接断开时，服务器会将其从数组中移除。
下面是服务器端的代码：
-- -------------------- ---- ------- ----- ---- - ---------------- ----- --- - --------------- ----- -- - -------------- --- ----------- - -- --- ------- - --- ----------------------- ---- -- - ----- -------- - ---------------------------- -- --------- -- ---------- - ------------------ - --------------- -------------------- ---------------- ----------- ------------- ------------ --- ------------------ ---------------- - - ----------- - -------- ---------------- ------ ---------- ------ ------ -------- ---------------- ----------------------------------- -- -- - ------- - ----------------------- -------- - ------ ------ -- ---- --- ------------------- ------------- ------ ------ ------ -- ---------------- -- ------- - ---------------- ------------------- ------- -- ------------------------展开代码
在上面的代码中，我们使用了 http 模块来创建了一个 HTTP 服务器，监听 3000 端口。在请求 '/listen' 路由时，我们新建了一个 SSE 连接，并将其添加到 clients 数组中保存起来。随后，服务器向当前连接发送一个带有在线用户数的 data 事件。
当有新的用户连接上来时，我们将在线用户数加一，并向每一个连接发送一个 message 事件，将新的在线用户数发送给客户端。同时，我们还定义了一个 close 事件，当一个连接断开时，将其从数组中移除。
客户端
客户端使用 HTML 和 JavaScript 实现。首先，在 HTML 中添加一个 EventSource 对象，指向服务器端的 /listen 路由。 EventSource 对象会通过 SSE 连接接收服务器发送的事件。
-- -------------------- ---- ------- ----- ------ - --- ----------------------- ------------- - -------- --- - ---------------------- -- ---------- - ---------------------------------- -------- --- - ----- ----------- - ------- ----- -- - ---------------------------------------- ------------ - ------------ -- ------- -------------- - -------- --- - ------------------- -- --- -展开代码
以上代码会在客户端建立 SSE 连接成功时触发 onopen 事件。在 message 事件中，我们将服务器发送的在线用户数更新到 DOM 中。在 SSE 连接出现错误时，onerror 事件也会被触发。
效果演示
下面是实时 Web 应用的效果演示：
总结
使用 SSE 技术可以比较简单地实现实时 Web 应用，不需要使用复杂的 WebSocket 技术。在本文中，我们介绍了一个实时 Web 应用案例，使用 Node.js 作为后端实现，使用 HTML 和 JavaScript 作为前端实现。同时，我们也向大家介绍了 SSE 协议的格式和原理。
在实际使用中， SSE 技术还有一些限制。例如，它只能从服务器向客户端单向传输数据，无法支持客户端向服务器发送消息；它也无法支持像 WebSocket 那样的二进制数据传输。因此，在具体的应用中，需要根据实际情况选择最适合的实时数据传输技术。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65afadd8add4f0e0ff920ff0
