使用 Node.js 开发服务器发送事件 (SSE) 以进行更新
引言
大家好，欢迎来到今天的讲座！今天我们要探讨的是如何使用 Node.js 实现服务器发送事件（Server-Sent Events, SSE）。SSE 是一种非常酷炫的技术，它允许服务器向客户端推送实时更新，而不需要客户端频繁地发起请求。这在很多场景下都非常有用，比如实时股票行情、聊天应用、在线游戏、甚至是天气预报。
想象一下，你正在开发一个股票交易平台，用户希望能够在页面上实时看到股票价格的变化。传统的做法是让客户端每隔几秒钟就向服务器发起一次请求，获取最新的数据。这种方法不仅效率低下，还会增加服务器的负担。而使用 SSE，服务器可以在有新数据时主动推送给客户端，这样既节省了资源，又提高了用户体验。
听起来是不是很厉害？别担心，虽然 SSE 看起来有点高大上，但其实实现起来非常简单。接下来，我们将一步步地讲解如何使用 Node.js 来实现 SSE，并通过一些实际的例子来帮助你更好地理解这个技术。
准备好了吗？让我们开始吧！😊
什么是服务器发送事件 (SSE)？
在正式动手之前，我们先来了解一下什么是 SSE。SSE 是 HTML5 引入的一种技术，它允许服务器向浏览器推送实时更新。与 WebSocket 不同，SSE 只支持单向通信，即服务器可以向客户端发送数据，但客户端不能向服务器发送数据。不过，这并不影响它的应用场景，因为很多情况下我们只需要服务器向客户端推送数据，而不需要双向通信。
SSE 的工作原理非常简单：当客户端通过 EventSource 对象连接到服务器后，服务器可以通过 HTTP 响应持续不断地向客户端发送数据。每次服务器发送数据时，客户端都会触发一个事件，开发者可以在 JavaScript 中监听这些事件并处理接收到的数据。
SSE 的特点
- 单向通信：如前所述，SSE 只支持服务器向客户端发送数据，客户端不能直接向服务器发送消息。
- 基于 HTTP：SSE 使用标准的 HTTP 协议，因此它可以很好地与现有的 Web 服务器集成。
- 自动重连：如果连接中断，浏览器会自动尝试重新连接，开发者不需要手动处理重连逻辑。
- 轻量级：相比 WebSocket，SSE 的实现更加简单，适合简单的实时更新场景。
- 浏览器兼容性：SSE 在现代浏览器中得到了广泛支持，但在一些旧版本的浏览器中可能不兼容。
SSE 的适用场景
- 实时通知：比如新消息提醒、系统通知等。
- 实时数据更新：如股票行情、天气预报、体育赛事比分等。
- 日志流：将服务器端的日志实时推送到前端，方便调试和监控。
- 进度条：显示文件上传或下载的进度。
SSE 的局限性
虽然 SSE 非常强大，但它也有一些局限性：
- 单向通信：如果你需要双向通信，建议使用 WebSocket。
- HTTP 连接限制：每个浏览器对同一域名的并发 HTTP 连接数有限制，通常为 6 个。如果超过这个限制，可能会导致连接失败。
- 不支持跨域：SSE 不支持跨域请求，除非服务器配置了 CORS（跨域资源共享）。
了解了这些基础知识后，我们就可以开始动手实现一个简单的 SSE 应用了！
使用 Node.js 实现 SSE
准备工作
在开始编写代码之前，我们需要确保已经安装了 Node.js 和 npm。如果你还没有安装，可以通过以下命令来安装：
# 安装 Node.js 和 npm
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
source ~/.bashrc
nvm install node安装完成后，创建一个新的项目目录，并初始化 npm：
mkdir sse-demo
cd sse-demo
npm init -y接下来，我们安装 Express，这是一个非常流行的 Node.js 框架，可以帮助我们快速搭建服务器：
npm install express现在，我们的准备工作已经完成，可以开始编写代码了！
创建一个简单的 SSE 服务器
首先，我们在 index.js 文件中编写一个基本的 Express 服务器，并添加一个路由来处理 SSE 请求：
const express = require('express');
const app = express();
const port = 3000;
app.get('/events', (req, res) => {
// 设置响应头
res.setHeader('Content-Type', 'text/event-stream');
res.setHeader('Cache-Control', 'no-cache');
res.setHeader('Connection', 'keep-alive');
// 发送初始消息
res.write(`data: Hello, this is your first SSE message!nn`);
// 每隔 5 秒发送一条消息
const intervalId = setInterval(() => {
const message = `data: The current time is ${new Date().toLocaleTimeString()}nn`;
res.write(message);
}, 5000);
// 当客户端断开连接时，清除定时器
req.on('close', () => {
clearInterval(intervalId);
console.log('Client disconnected');
});
});
app.listen(port, () => {
console.log(`SSE server is running on http://localhost:${port}`);
});在这段代码中，我们做了以下几件事：
- 设置响应头：为了告诉浏览器这是一个 SSE 请求，我们需要设置
Content-Type为text/event-stream，并禁用缓存和保持连接。 - 发送初始消息：当客户端第一次连接时，我们发送一条欢迎消息。
- 定时发送消息：使用
setInterval每隔 5 秒发送一次当前时间。 - 处理客户端断开连接：当客户端断开连接时，清除定时器并打印日志。
客户端代码
接下来，我们需要编写一个简单的 HTML 页面来接收并显示服务器推送的消息。在 public/index.html 文件中编写以下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SSE Demo</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
#messages {
margin-top: 20px;
}
.message {
margin-bottom: 10px;
}
</style>
</head>
<body>
<h1>Server-Sent Events Demo</h1>
<div id="messages"></div>
<script>
if (typeof(EventSource) !== "undefined") {
const eventSource = new EventSource('/events');
eventSource.onmessage = function(event) {
const messagesDiv = document.getElementById('messages');
const newMessage = document.createElement('div');
newMessage.className = 'message';
newMessage.textContent = event.data;
messagesDiv.appendChild(newMessage);
};
eventSource.onerror = function() {
console.error('EventSource failed.');
};
} else {
console.error('Sorry, your browser does not support Server-Sent Events.');
}
</script>
</body>
</html>在这段代码中，我们使用了 EventSource 对象来连接到服务器的 /events 路由，并监听 onmessage 事件来处理接收到的消息。每当服务器推送一条消息时，我们会将其添加到页面上的 #messages 容器中。
启动服务器并测试
现在，我们可以启动服务器并测试 SSE 功能了。在终端中运行以下命令：
node index.js打开浏览器，访问 http://localhost:3000，你应该会看到每 5 秒钟更新一次的时间信息。恭喜你，你已经成功实现了第一个 SSE 应用！🎉
进阶功能
虽然我们已经实现了一个简单的 SSE 应用，但还有很多可以改进的地方。接下来，我们将介绍一些进阶功能，帮助你构建更复杂的应用。
1. 发送自定义事件类型
默认情况下，SSE 会触发 message 事件。但我们也可以发送自定义事件类型，这样可以让客户端根据不同的事件类型执行不同的操作。例如，我们可以发送 update 和 error 两种类型的事件：
app.get('/events', (req, res) => {
res.setHeader('Content-Type', 'text/event-stream');
res.setHeader('Cache-Control', 'no-cache');
res.setHeader('Connection', 'keep-alive');
// 发送自定义事件
res.write(`event: updatendata: Initial data receivednn`);
const intervalId = setInterval(() => {
const message = `event: updatendata: Time update at ${new Date().toLocaleTimeString()}nn`;
res.write(message);
}, 5000);
req.on('close', () => {
clearInterval(intervalId);
console.log('Client disconnected');
});
// 模拟错误事件
setTimeout(() => {
res.write(`event: errorndata: An error occurred!nn`);
}, 10000);
});在客户端，我们可以监听特定的事件类型：
eventSource.addEventListener('update', function(event) {
const messagesDiv = document.getElementById('messages');
const newMessage = document.createElement('div');
newMessage.className = 'message';
newMessage.textContent = event.data;
messagesDiv.appendChild(newMessage);
});
eventSource.addEventListener('error', function(event) {
console.error('Error:', event.data);
});2. 发送 JSON 数据
SSE 默认发送的是纯文本数据，但我们可以使用 JSON 格式来传递更复杂的数据结构。例如，假设我们想发送包含多个字段的对象：
app.get('/events', (req, res) => {
res.setHeader('Content-Type', 'text/event-stream');
res.setHeader('Cache-Control', 'no-cache');
res.setHeader('Connection', 'keep-alive');
const sendData = (type, data) => {
res.write(`event: ${type}ndata: ${JSON.stringify(data)}nn`);
};
sendData('update', { message: 'Initial data received' });
const intervalId = setInterval(() => {
sendData('update', { message: `Time update at ${new Date().toLocaleTimeString()}` });
}, 5000);
req.on('close', () => {
clearInterval(intervalId);
console.log('Client disconnected');
});
setTimeout(() => {
sendData('error', { message: 'An error occurred!' });
}, 10000);
});在客户端，我们可以解析 JSON 数据：
eventSource.addEventListener('update', function(event) {
const data = JSON.parse(event.data);
const messagesDiv = document.getElementById('messages');
const newMessage = document.createElement('div');
newMessage.className = 'message';
newMessage.textContent = data.message;
messagesDiv.appendChild(newMessage);
});
eventSource.addEventListener('error', function(event) {
const data = JSON.parse(event.data);
console.error('Error:', data.message);
});3. 使用 retry 字段控制重连间隔
当 SSE 连接断开时，浏览器会自动尝试重新连接。我们可以通过 retry 字段来指定重连的时间间隔（以毫秒为单位）。例如，如果我们希望浏览器在连接断开后等待 5 秒再重新连接，可以在响应中添加 retry 字段：
app.get('/events', (req, res) => {
res.setHeader('Content-Type', 'text/event-stream');
res.setHeader('Cache-Control', 'no-cache');
res.setHeader('Connection', 'keep-alive');
// 设置重连间隔为 5000 毫秒
res.write(`retry: 5000n`);
res.write(`data: Initial data receivednn`);
const intervalId = setInterval(() => {
const message = `data: Time update at ${new Date().toLocaleTimeString()}nn`;
res.write(message);
}, 5000);
req.on('close', () => {
clearInterval(intervalId);
console.log('Client disconnected');
});
});4. 处理多客户端连接
在实际应用中，可能会有多个客户端同时连接到同一个 SSE 服务器。为了处理这种情况，我们可以使用一个数组来存储所有连接的客户端，并在每次有新数据时向所有客户端广播消息。下面是一个简单的示例：
const clients = [];
app.get('/events', (req, res) => {
res.setHeader('Content-Type', 'text/event-stream');
res.setHeader('Cache-Control', 'no-cache');
res.setHeader('Connection', 'keep-alive');
// 将客户端添加到数组中
clients.push(res);
// 发送初始消息
res.write(`data: Welcome to the SSE demo!nn`);
// 当客户端断开连接时，从数组中移除
req.on('close', () => {
clients = clients.filter(client => client !== res);
console.log('Client disconnected');
});
});
// 模拟广播消息
setInterval(() => {
const message = `data: Broadcast message at ${new Date().toLocaleTimeString()}nn`;
clients.forEach(client => {
client.write(message);
});
}, 10000);在这个例子中，我们使用了一个 clients 数组来存储所有连接的客户端。每当有新客户端连接时，我们将它添加到数组中；当客户端断开连接时，我们从数组中移除它。然后，我们使用 setInterval 每隔 10 秒向所有客户端广播一条消息。
5. 使用 Redis 实现分布式 SSE
在大型应用中，可能会有多个服务器实例同时运行。为了确保所有客户端都能接收到相同的消息，我们可以使用 Redis 这样的消息队列来实现分布式 SSE。下面是一个简单的示例，展示了如何使用 Redis 来广播消息：
首先，安装 Redis 和 ioredis 包：
npm install ioredis然后，在 index.js 中编写以下代码：
const express = require('express');
const Redis = require('ioredis');
const app = express();
const port = 3000;
// 创建 Redis 客户端
const redis = new Redis();
// 存储所有连接的客户端
const clients = [];
app.get('/events', (req, res) => {
res.setHeader('Content-Type', 'text/event-stream');
res.setHeader('Cache-Control', 'no-cache');
res.setHeader('Connection', 'keep-alive');
// 将客户端添加到数组中
clients.push(res);
// 订阅 Redis 通道
redis.subscribe('sse-channel');
// 当接收到 Redis 消息时，向客户端发送
redis.on('message', (channel, message) => {
res.write(`data: ${message}nn`);
});
// 当客户端断开连接时，从数组中移除
req.on('close', () => {
clients = clients.filter(client => client !== res);
redis.unsubscribe('sse-channel');
console.log('Client disconnected');
});
});
// 模拟广播消息
setInterval(() => {
const message = `Broadcast message at ${new Date().toLocaleTimeString()}`;
redis.publish('sse-channel', message);
}, 10000);
app.listen(port, () => {
console.log(`SSE server is running on http://localhost:${port}`);
});在这个例子中，我们使用 Redis 的发布/订阅机制来广播消息。每当有新消息时，Redis 会将消息推送到所有订阅了 sse-channel 的客户端。这样，即使有多个服务器实例，所有客户端都能接收到相同的消息。
总结
通过今天的讲座，我们深入了解了如何使用 Node.js 实现服务器发送事件（SSE）。我们从基础的 SSE 概念讲起，逐步构建了一个简单的 SSE 应用，并介绍了如何发送自定义事件、JSON 数据、控制重连间隔、处理多客户端连接以及使用 Redis 实现分布式 SSE。
SSE 是一个非常强大的工具，尤其适用于需要实时更新的场景。虽然它只支持单向通信，但在很多情况下，这种简单的模型已经足够满足需求。如果你正在开发一个需要实时推送数据的应用，不妨考虑一下 SSE，它可能会为你带来意想不到的效果！
希望今天的讲座对你有所帮助。如果你有任何问题或想法，欢迎在评论区留言讨论。😊
谢谢大家，我们下次再见！👋
