随着互联网和移动互联网的发展，实时性逐渐成为了各种应用的必要需求。在前端开发中，我们通常会使用 WebSocket 或者轮询来实现实时更新数据的功能。但是这些方法都有其缺点，WebSocket 需要服务器端支持，而轮询则会导致大量的无效请求。在这篇文章中，我们将介绍另一种实现实时更新数据的方法：Server-Sent Events。
什么是 Server-Sent Events？
Server-Sent Events 是一种基于 HTTP 的服务器推送技术，它允许服务器向客户端发送事件流，以实现实时更新数据的功能。与 WebSocket 不同，Server-Sent Events 使用的是单向通信，即服务器向客户端发送数据，而客户端不能向服务器发送数据。
Server-Sent Events 使用的是纯文本协议，可以使用 JavaScript 中的 EventSource 对象来接收和处理服务器发送的事件流。在事件流中，每个事件都是一个文本消息，由两部分组成：事件类型和数据。事件类型以“event:”开头，数据则以“data:”开头。例如：
event: news
data: {"title": "财经新闻", "content": "今日股市大涨"}如何使用 Server-Sent Events？
下面我们将介绍如何使用 Server-Sent Events 构建出一个实时财经新闻应用。
服务端代码
首先，我们需要编写一个简单的 Node.js 服务端来发送财经新闻。代码如下：
// javascriptcn.com 代码示例
const http = require('http');
const server = http.createServer((req, res) => {
res.writeHead(200, {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive'
});
setInterval(() => {
const news = {
title: '财经新闻',
content: '今日股市大涨'
};
res.write(`event: news\n`);
res.write(`data: ${JSON.stringify(news)}\n\n`);
}, 5000);
});
server.listen(3000, () => {
console.log('Server is running on port 3000');
});在代码中，我们创建了一个 HTTP 服务器，并在每隔 5 秒钟向客户端发送一条财经新闻消息。注意，我们在响应头中设置了“Content-Type”为“text/event-stream”，这是 Server-Sent Events 的标准 MIME 类型。
客户端代码
接下来，我们需要编写客户端代码来接收并处理服务器发送的事件流。代码如下：
const source = new EventSource('http://localhost:3000');
source.addEventListener('news', (event) => {
const news = JSON.parse(event.data);
console.log(news.title, news.content);
});在代码中，我们使用 EventSource 对象来连接服务器，并监听“news”事件。当服务器发送一条新闻消息时，客户端会收到该事件，并将消息打印到控制台中。
运行示例
现在，我们可以运行上述代码，并在控制台中查看实时财经新闻的更新了。如果你想要自己尝试一下，请按照以下步骤操作：
- 在控制台中进入到一个空白目录，并创建一个名为“server.js”的文件，将上述服务端代码复制到该文件中。
- 在控制台中运行“node server.js”命令，启动服务端。
- 在控制台中进入到另一个空白目录，并创建一个名为“client.js”的文件，将上述客户端代码复制到该文件中。
- 在控制台中运行“node client.js”命令，启动客户端。
- 在控制台中观察实时财经新闻的更新。
总结
通过本文，我们了解了 Server-Sent Events 的基本概念和使用方法，并通过一个实例展示了如何使用 Server-Sent Events 构建出一个实时财经新闻应用。Server-Sent Events 不仅能够实现实时更新数据的功能，还可以避免 WebSocket 和轮询的缺点，是一种非常实用的技术。如果你想要实现实时更新数据的功能，可以考虑使用 Server-Sent Events。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65669d1bd2f5e1655df99c11