在 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 连接断开时，服务器会将其从数组中移除。
下面是服务器端的代码：
const http = require('http');
const url = require('url');
const fs = require('fs');
let onlineCount = 0;
let clients = [];
http.createServer((req, res) => {
const pathname = url.parse(req.url).pathname;
if (pathname == '/listen') {
res.writeHead(200, {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive'
});
clients.push(res);
res.write('data: ' + onlineCount + '\n\n');
console.log('New client connected! Online client count:', clients.length);
req.connection.addListener('close', () => {
clients = clients.filter(function (stream) {
return stream != res;
});
console.log('Client disconnected! Online client count: ', clients.length);
}, false);
}
}).listen(3000);
console.log('Server running at http://localhost:3000');在上面的代码中，我们使用了 http 模块来创建了一个 HTTP 服务器，监听 3000 端口。在请求 '/listen' 路由时，我们新建了一个 SSE 连接，并将其添加到 clients 数组中保存起来。随后，服务器向当前连接发送一个带有在线用户数的 data 事件。
当有新的用户连接上来时，我们将在线用户数加一，并向每一个连接发送一个 message 事件，将新的在线用户数发送给客户端。同时，我们还定义了一个 close 事件，当一个连接断开时，将其从数组中移除。
客户端
客户端使用 HTML 和 JavaScript 实现。首先，在 HTML 中添加一个 EventSource 对象，指向服务器端的 /listen 路由。 EventSource 对象会通过 SSE 连接接收服务器发送的事件。
const source = new EventSource('/listen');
source.onopen = function (e) {
console.log('Connected to server!');
}
source.addEventListener('message', function (e) {
const onlineCount = e.data;
const el = document.querySelector('#online-count');
el.innerText = onlineCount;
}, false);
source.onerror = function (e) {
console.log('Error: ', e);
}以上代码会在客户端建立 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