随着 Web 应用的不断发展，实时通信已经成为了现代 Web 应用的重要特性之一。在传统的 Web 应用中，客户端需要不断地向服务器发起请求来获取最新的数据，而这种轮询方式会增加服务器的负担和网络的延迟。为了解决这个问题，Server-Sent Events（SSE）应运而生，它可以让服务器向客户端推送实时数据，从而实现实时通信。
本文将介绍如何使用 Node.js 和 SSE 实现实时消息推送。我们将首先讲解 SSE 的基本原理和用法，然后使用一个简单的示例来演示如何在 Node.js 中使用 SSE 实现实时消息推送。
SSE 基本原理和用法
SSE 是一种基于 HTTP 的实时通信技术，它允许服务器向客户端推送实时数据。SSE 的基本原理是客户端向服务器发送一个 HTTP 请求，服务器在响应中使用特殊的 MIME 类型 text/event-stream 来推送数据。客户端通过监听 onmessage 事件来接收服务器推送的数据。
SSE 支持以下三种类型的消息：
- 注释消息：以
:开头的消息，用于在连接建立后向客户端发送注释，可以用来验证连接是否正常。 - 事件消息：以
event:开头的消息，用于指定事件的名称。 - 数据消息：以
data:开头的消息，用于指定要推送的数据。
以下是一个简单的 SSE 示例：
// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
<title>SSE 示例</title>
</head>
<body>
<div id="messages"></div>
<script>
const eventSource = new EventSource('/sse');
eventSource.onmessage = function(event) {
const messages = document.getElementById('messages');
const data = JSON.parse(event.data);
const message = document.createElement('div');
message.innerHTML = data.message;
messages.appendChild(message);
};
</script>
</body>
</html>在上面的示例中，我们创建了一个 EventSource 对象，并指定了服务器的 SSE 接口 /sse。然后我们监听 onmessage 事件，在事件处理函数中将服务器推送的数据添加到页面上。
在服务器端，我们需要使用特殊的 MIME 类型 text/event-stream 来向客户端推送数据。以下是一个使用 Node.js 和 Express 框架实现 SSE 的示例：
// javascriptcn.com 代码示例
const express = require('express');
const app = express();
app.get('/sse', (req, res) => {
res.writeHead(200, {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive'
});
const messages = ['Hello', 'World', 'From', 'Server'];
let id = 0;
const intervalId = setInterval(() => {
if (messages.length === 0) {
clearInterval(intervalId);
res.end();
return;
}
const message = messages.shift();
res.write(`id: ${id}\n`);
res.write(`event: message\n`);
res.write(`data: ${JSON.stringify({ message })}\n\n`);
id++;
}, 1000);
});
app.listen(3000, () => {
console.log('Server started on port 3000');
});在上面的示例中，我们创建了一个 SSE 接口 /sse，并在响应中使用了特殊的 MIME 类型 text/event-stream。然后我们使用 setInterval 函数定时向客户端推送数据。在每次推送数据时，我们使用 id 来标识每个消息，使用 event 来指定事件的名称，使用 data 来指定要推送的数据。
在 Node.js 中使用 SSE 实现实时消息推送
现在我们已经了解了 SSE 的基本原理和用法，下面我们将使用 Node.js 和 SSE 实现一个实时消息推送的示例。
首先，我们需要创建一个 Express 应用程序，并在应用程序中创建一个 SSE 接口 /sse。在 SSE 接口中，我们使用 setInterval 函数定时向客户端推送数据。
// javascriptcn.com 代码示例
const express = require('express');
const app = express();
app.get('/sse', (req, res) => {
res.writeHead(200, {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive'
});
let id = 0;
const intervalId = setInterval(() => {
const message = `Message ${id}`;
res.write(`id: ${id}\n`);
res.write(`event: message\n`);
res.write(`data: ${JSON.stringify({ message })}\n\n`);
id++;
}, 1000);
req.on('close', () => {
clearInterval(intervalId);
res.end();
});
});
app.listen(3000, () => {
console.log('Server started on port 3000');
});在上面的示例中，我们使用 setInterval 函数定时向客户端推送数据。在每次推送数据时，我们使用 id 来标识每个消息，使用 event 来指定事件的名称，使用 data 来指定要推送的数据。我们还监听了客户端的关闭事件 close，在客户端关闭连接时清除定时器并结束响应。
然后，我们在客户端中创建一个 SSE 对象，并指定服务器的 SSE 接口 /sse。在 SSE 对象的 onmessage 事件处理函数中，我们将服务器推送的数据添加到页面上。
// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
<title>实时消息推送示例</title>
</head>
<body>
<ul id="messages"></ul>
<script>
const eventSource = new EventSource('/sse');
eventSource.onmessage = function(event) {
const messages = document.getElementById('messages');
const data = JSON.parse(event.data);
const message = document.createElement('li');
message.innerHTML = data.message;
messages.appendChild(message);
};
</script>
</body>
</html>在上面的示例中，我们创建了一个 EventSource 对象，并指定了服务器的 SSE 接口 /sse。然后我们监听 onmessage 事件，在事件处理函数中将服务器推送的数据添加到页面上。
现在，我们运行 Node.js 应用程序，打开浏览器访问客户端页面，就可以看到实时消息推送的效果了。
总结
本文介绍了如何使用 Node.js 和 SSE 实现实时消息推送。我们首先讲解了 SSE 的基本原理和用法，然后使用一个简单的示例演示了如何在 Node.js 中使用 SSE 实现实时消息推送。通过本文的学习，读者可以了解 SSE 的基本原理和用法，并掌握使用 Node.js 和 SSE 实现实时消息推送的方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650ad00e95b1f8cacd52a05a