在前端开发中，消息推送是非常重要的一项技术。在传统的方式中，我们可以使用轮询来实现消息推送。但是轮询存在效率低下、带宽占用高、服务器负载大等问题。而 Server-sent Events（服务器推送事件）则是一种新的实现方式，它可以解决轮询带来的诸多问题。本文将详细介绍 Server-sent Events 如何实现多用户的消息推送，并提供示例代码。
什么是 Server-sent Events
Server-sent Events（服务器推送事件）是一种 HTML5 的 API，它允许 Web 应用程序在客户端浏览器中接收来自服务器的事件通知。这种通信方式只需要建立一次连接，服务器可以随时向客户端发送消息，而不需要客户端不断地向服务器发起请求。
Server-sent Events 通常使用“text/event-stream”格式作为数据传输格式。这种格式支持发送“消息”和“事件”，每个“消息”可以包含一个或多个“事件”，如下所示：
data: Hello, World! data: This is a message with two events event: event1 data: This is the first event event: event2 data: This is the second event
在这个例子中，我们可以看到一些“消息”和“事件”。每个“消息”以“data:”开头，每个“事件”以“event:”开头。服务器可以发送任意数量的“消息”和“事件”。
实现多用户的消息推送
现在，我们已经了解了 Server-sent Events 的基本原理。接下来，我们将介绍如何使用 Server-sent Events 实现多用户的消息推送。
服务端实现
首先，我们需要在服务器端实现一个服务，该服务可以向多个客户端发送消息。我们可以使用 Node.js 和 Express.js 创建一个简单的服务，如下所示：
const express = require('express');
const app = express();
const http = require('http').createServer(app);
const port = process.env.PORT || 3000;
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html');
});
app.get('/stream', (req, res) => {
res.writeHead(200, {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive',
});
res.write('\n');
// 建立连接时，将客户端添加到 clients 数组中
const clientId = Date.now();
const newClient = {
id: clientId,
res,
};
clients.push(newClient);
// 客户端关闭连接时，将其从 clients 数组中删除
req.on('close', () => {
console.log(`${clientId} Connection closed`);
clients = clients.filter(c => c.id !== clientId);
});
});
http.listen(port, () => {
console.log(`Server started on port ${port}`);
});这个服务中有两个路由：一个用于返回主界面，一个用于建立 Server-sent Events 连接。当一个客户端建立连接时，我们将其添加到 clients 数组中。当客户端关闭连接时，我们将其从 clients 数组中删除。
在这个服务中，我们还需要编写一个函数，该函数将从 clients 数组中读取客户端，然后向客户端发送消息。代码如下所示：
function sendMessages(msg) {
clients.forEach(c => c.res.write(`data: ${msg}\n\n`));
}该函数使用 forEach() 方法从 clients 数组中读取客户端，然后使用 “res.write()” 方法将消息发送给每个客户端。
客户端实现
客户端需要通过 EventSource 对象来建立 Server-sent Events 连接并接收来自服务器的消息。以下是一个简单的客户端代码示例如下：
const source = new EventSource('/stream');
source.addEventListener('message', function(event) {
console.log('Received a message: ' + event.data);
});在该代码中，我们使用 EventSource 对象连接路由“/stream”，以接收来自服务器的消息。并且，我们通过 addEventListener() 方法注册了一个事件处理程序，以处理接收到的所有消息。
发送消息
最后，我们可以在服务端调用 sendMessages() 函数来向所有连接的客户端发送消息。如下所示：
sendMessages('Hello, World!');可以在服务端任意地调用 sendMessages() 函数，以向所有连接的客户端发送消息。
总结
本文介绍了 Server-sent Events 的原理，并演示了如何使用 Node.js 和 Express.js 在服务端实现多用户的消息推送。我们还提供了一个简单的客户端示例代码来演示如何接收来自服务器的消息。Server-sent Events 已经被广泛应用于 Web 应用程序开发中，它提供了高效、实时的消息推送机制，可以大大提高 Web 应用程序的用户体验。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/659295a2eb4cecbf2d755f9a