前言
在 Web 应用程序中，有时需要向客户端发送实时数据更新，以便及时更新页面内容。在过去，这通常通过轮询技术来实现，即客户端定期向服务器发送请求以获取更新。然而，这种方式会占用大量带宽和服务器资源。为了解决这个问题，HTML5 引入了 Server Sent Events (SSE) 技术，它允许服务器向客户端推送数据，而无需客户端不断地发送请求。
在 Node.js 中，我们可以使用 Express.js 框架来构建 SSE 服务器。在本文中，我们将介绍如何使用 Express.js 框架创建 SSE 服务器，并通过示例代码演示其用法。
SSE 简介
SSE 是一种基于 HTTP 协议的服务器推送技术，它使用长连接（长轮询）来实现实时数据更新。与传统的轮询技术不同，SSE 允许服务器向客户端发送实时数据更新，而无需客户端不断地发送请求。这种方式可以大大减少带宽和服务器资源的占用，从而提高应用程序的性能和响应速度。
SSE 采用类似于事件流的方式，服务器向客户端发送一系列事件，每个事件都包含一个事件类型和数据。客户端通过 EventSource API 来监听这些事件，并在事件到达时处理它们。SSE 还支持自定义事件类型和数据格式，使应用程序开发更加灵活。
Express.js 中的 SSE 实现
在 Express.js 中，可以使用 res.write() 和 res.flush() 方法来实现 SSE。res.write() 方法用于向客户端发送数据，res.flush() 方法用于立即将数据发送到客户端。在 SSE 中，每个事件都以 data: 开头，并以两个换行符 \n\n 结尾。例如：
data: This is a message from server\n\n
这个事件的类型为默认类型 message，数据为 This is a message from server。
下面是一个简单的 SSE 服务器示例：
// javascriptcn.com 代码示例
const express = require('express');
const app = express();
app.get('/sse', function(req, res) {
res.setHeader('Content-Type', 'text/event-stream');
res.setHeader('Cache-Control', 'no-cache');
setInterval(function() {
const data = `data: ${new Date()}\n\n`;
res.write(data);
res.flush();
}, 1000);
});
app.listen(3000, function() {
console.log('Server listening on port 3000');
});在这个示例中，我们创建了一个 /sse 路由，当客户端连接到这个路由时，服务器将以每秒一次的频率向客户端发送一个事件，事件类型为默认类型 message，数据为当前的时间。
在客户端上，我们可以使用 EventSource API 来监听这些事件：
const source = new EventSource('/sse');
source.onmessage = function(event) {
console.log(event.data);
};当服务器向客户端发送事件时，onmessage 回调函数将被触发，并将事件数据打印到控制台上。
SSE 的应用场景
SSE 技术在 Web 应用程序中有许多应用场景，例如：
- 实时数据更新：SSE 可以用于向客户端发送实时数据更新，例如股票价格、天气预报等。
- 聊天应用程序：SSE 可以用于实现实时聊天应用程序，例如在线客服、社交媒体等。
- 通知系统：SSE 可以用于向客户端发送通知信息，例如新消息、提醒等。
总结
在本文中，我们介绍了 SSE 技术的原理和实现方式，并通过 Express.js 框架演示了如何创建 SSE 服务器。SSE 技术可以大大提高 Web 应用程序的性能和响应速度，适用于实时数据更新、聊天应用程序、通知系统等场景。如果您正在开发这些类型的应用程序，SSE 技术是值得尝试的一种方案。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6569a762d2f5e1655d2379f6