简介
在现代化的 Web 开发中，实时数据推送已经越来越常见。例如在社交网络中，我们需要即时收到朋友的新消息；在在线游戏中，我们需要即时了解游戏状态。这些都离不开实时数据推送。
Server-sent Events (SSE) 是一种实现实时数据推送的技术。它允许服务器向客户端发送数据，而不需要客户端主动发起请求。SSE 在 Web 界面中的实时化和实时更新中具有广泛的应用，例如股票和天气预报。
Node.js 是一个非常好的服务器端开发环境。它支持 SSE，并提供了多种方式来实现实时数据推送。
本文将介绍 Node.js 中使用 SSE Server-sent Events 实现实时数据推送的方法，并提供示例代码。
准备工作
在使用 Node.js 实现 SSE 之前，我们需要了解 SSE 的定义。SSE 是一种在单个 HTTP 连接上实现服务器到客户端的实时数据推送的方法。
在 SSE 中，服务器向客户端发送数据流。这些数据流可以包含一条或多条消息，每条消息都以“data: ”标识开头，并以“\n\n”作为结束符。
客户端打开连接并请求数据流。随着时间的推移，服务器将发送数据流给客户端。如果没有消息可用，则服务器将保持连接打开。如果消息可用，则服务器将打包成数据流并发送到客户端。客户端可以自主选择断开连接。
SSE 的浏览器支持非常好。它被现代浏览器广泛支持，包括 Chrome、Firefox、Safari 和 Opera。Internet Explorer 也支持 SSE，但需要使用代理库。
现在我们已经了解了 SSE 的定义，我们可以开始使用 Node.js 中的 SSE 实现实时数据推送了。
实现 SSE Server-sent Events
首先，我们需要为客户端提供 SSE 事件源。在 Node.js 中，我们可以使用“EventSource”对象来处理 SSE 事件源。在 HTML 页面中引入 JavaScript 文件，如下所示：
var source = new EventSource('/events');
source.onmessage = function(event) {
document.getElementById('result').innerHTML += event.data + "<br>";
};其中，“/events”表示 SSE 事件源的 URL。当服务器发送数据流时，事件源监听器将收到事件并处理数据流。
接下来，我们可以在服务器端使用 SSE 事件源来实现 SSE 服务。以下是使用 SSE 事件源实现 SSE 服务的示例代码：
// javascriptcn.com 代码示例
const http = require('http');
http.createServer(function (req, res) {
res.writeHead(200, {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive'
});
setInterval(function() {
res.write('data: ' + new Date().toLocaleTimeString() + "\n\n");
}, 1000);
}).listen(8080);在上面的代码中，我们创建了一个 HTTP 服务器，并设置了响应头。在响应头中，Content-Type 设置为“text/event-stream”，这样浏览器就知道了这是 SSE 事件源。Cache-Control 将缓存设置为“no-cache”，这样浏览器将不会缓存 SSE 数据。Connection 设置为“keep-alive”，这样连接将保持开放状态，以便服务器可以随时向客户端发送数据流。
“setInterval”函数每秒钟向客户端发送一次数据流，数据流包含当前时间。
现在我们已经实现了 SSE 服务，我们可以在浏览器中测试它。在浏览器中打开“http://localhost:8080”时，我们应该能够看到匆匆流逝的时间。以下是运行示例代码时的屏幕截图：
总结
本文介绍了 Node.js 中使用 SSE Server-sent Events 实现实时数据推送的方法，并提供了示例代码。SSE 可以帮助我们实现实时数据推送并提高 Web 界面的实时化和实时更新。
在现代 Web 开发中，实时数据推送是越来越受欢迎的。我们希望本文能够对实现 SSE 服务的初学者有所帮助，并为实时化和实时更新提供指导。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/652a1d137d4982a6ebc793d6