在现代 Web 应用程序中，实时数据显示已成为一个重要的功能。它可以让用户在不刷新页面的情况下实时更新数据，从而提高用户体验。在本文中，我们将介绍如何使用 AngularJS 和 Server-Sent Events 构建实时数据显示应用。
AngularJS 简介
AngularJS 是一个由 Google 开发的 JavaScript 框架，用于构建动态 Web 应用程序。它使用了 MVVM 模式（Model-View-ViewModel），并提供了一系列的指令、服务和组件，使得开发者可以更加方便地构建 Web 应用程序。
Server-Sent Events 简介
Server-Sent Events 是一种建立在 HTTP 协议之上的实时通信协议。它通过一个长期存在的 HTTP 连接，向客户端发送数据，从而实现实时数据显示的功能。相比于 WebSocket，Server-Sent Events 更加简单易用，适用于一些简单的应用场景。
构建实时数据显示应用
1. 建立 Server-Sent Events 服务端
在 Node.js 中，可以使用 http 模块来建立 Server-Sent Events 服务端。以下是一个简单的示例代码：
// javascriptcn.com 代码示例
const http = require('http');
http.createServer((req, res) => {
res.writeHead(200, {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive',
});
setInterval(() => {
const data = new Date().toLocaleTimeString();
res.write(`data: ${data}\n\n`);
}, 1000);
}).listen(8000);在上面的代码中，我们使用 http.createServer 方法创建了一个 HTTP 服务器，并设置了响应头，以便客户端能够正确地解析 Server-Sent Events 数据。然后我们使用 setInterval 定时向客户端发送数据。
2. 建立 AngularJS 客户端
在 AngularJS 中，可以使用 $http 服务来建立 Server-Sent Events 客户端。以下是一个简单的示例代码：
// javascriptcn.com 代码示例
angular.module('app', [])
.controller('MainController', ($scope, $http) => {
const source = new EventSource('http://localhost:8000');
source.onmessage = (event) => {
$scope.$apply(() => {
$scope.data = event.data;
});
};
});在上面的代码中，我们使用 $http 服务创建了一个 GET 请求，发起了一个 Server-Sent Events 连接。然后我们使用 source.onmessage 方法监听服务器发送的数据，并使用 $scope.$apply 方法更新界面。
3. 运行应用程序
最后，我们需要将 Server-Sent Events 服务端和 AngularJS 客户端运行起来。可以使用以下命令：
$ node server.js
然后在浏览器中打开 index.html 文件即可看到实时数据显示的效果。
总结
在本文中，我们介绍了如何使用 AngularJS 和 Server-Sent Events 构建实时数据显示应用。通过这种方式，我们可以更加方便地实现实时数据显示的功能，提高用户体验。希望本文能够对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6567f039d2f5e1655d0bd518