自动刷新页面调用 web 服务

Question

我是 Angular 新手，当数据库中的数据发生变化时，我有一个关于从 Web 服务检索数据的问题。

我正在处理的系统有 2 个“部分”：一个运行前台（不是 Angular）的 Windows 应用程序和一个在复杂的不同位置的 6 个平板电脑上运行的 Angular 应用程序。该综合体相当小，所有系统都具有良好、持续的网络连接。

前台应用程序（不是 Angular）在主办公室运行。它用于在当前客户“登记”到综合体时使用当前客户的姓名更新 SQL Server 数据库，还用于将客户从综合体中的一个位置“移动”到另一个位置和/或“签出”客户综合体。
此应用程序是 Windows 应用程序，它使用 ADO.NET 和 SQL Server 存储过程直接访问数据库。这是目前无法更改的旧版应用程序。

另一部分是 Angular 6 应用程序，可通过网页从 6 个平板电脑访问。功能是让用户
1) 查看当前客户列表及其在综合体中的位置
2) 将客户从一个位置“移动”到另一个位置
3) 从综合体中“检查”客户。

通过调用 RESTful Web 服务（用 C# 和 .NET Core 编写）来执行特定操作：
A) 获取当前客户列表及其位置，
B) 将客户“移动”到不同的位置
C）从综合体中“检查”客户
数据存储在 SQL Server 数据库中。
UI 使用各种 PrimeNG 组件（下拉菜单、选项卡和表格）。

通过阅读各种文章、博客和帖子，在我看来，有一种方法可以在服务器上的数据发生更改时触发客户端进行更新，因为主要的“操作方法”示例之一是“聊天”应用程序当有人输入新消息时，它会在应用程序中更新。

我无法确定当客户搬家或退房时如何在平板电脑上进行更新。我考虑过使用计时器或刷新，但如果刷新发生时平板电脑的客户位置正在平板电脑上更新，那么该方法似乎可能会导致问题，如果数据库数据没有被更改，则会导致大量不必要的流量，或者刷新可能不会在正确的时间发生以显示客户更改（刷新可能发生在更新之前，但随后更新发生在下一次数据库更新之前）。

现在我有一个“刷新”按钮，它调用网络服务来获取客户和位置，但这需要用户手动激活它，他们可能不记得这样做，因此数据不正确。

任何指针将不胜感激。

Angular 6 应用程序的结构如下：
1. 客户信息（姓名、日期、时间）和位置的单独接口
2. 为特定操作调用 Web 服务的“数据”服务
3. 一个“本地”服务，包含调用“数据”服务的逻辑，操作从“数据”服务调用返回的数据
4. 处理 UI 事件、显示错误消息和 toast 消息的“主”组件
5. 作为 UI 的 HTML 页面

main.component.ts：

this.localService.GetCustomers().subscribe(p => this.people = p);

local.service.ts

GetCustomers(){
    this.customers = this.dataService.GetCustomers();
}

data.service.ts

   GetCustomers(){
       return this.httpClient.get<ICustomer[]>(this.urlBase + this.urlGetCustomers);
    }

Answer 1

您可以像这样使用 setInterval 调用每个间隔的 API

this.interval = setInterval(() => {
        this.localService.GetCustomers().subscribe(p => this.people = p);
 }, 5000); // 5 second is interval to refresh page

但是你这样调用API不是很好的解决方案，如果并发用户增加，它和拒绝服务一样。

如果你的后端是Java，我建议你改成web socket来实现服务。实时请求的性能更好。

包https://www.npmjs.com/package/websocket

如果你的后端是 ASP.NET Web API，你可以使用 SignalR Package https://www.npmjs.com/package/@aspnet/signalr

我们在Web API和SignalR之间测试过这种情况，如果你使用WebAPI，浏览器的CPU和内存增长很快，我们选择SignalR作为解决方案。

如果您的后端并不总是发生变化，您可以在后端使用cached 以获得更好的网络服务器性能。

如果你使用 SQL Server，你可以使用 SQL Dependency 来通知来自 SQL 的最新更新（添加新客户、更新或删除客户） 关于使用SQL Dependency和SignalR的参考

https://techbrij.com/database-change-notifications-asp-net-signalr-sqldependency

Answer 2

您可以每 X 秒进行一次轮询，并在每次请求时更新您的数据。或者您可以使用网络套接字。 第一种方法，参考这个答案https://stackoverflow.com/a/42920844/7179294
另请查看此答案以获取更多详细信息https://stackoverflow.com/a/54629027/7179294

Answer 3

我们可以将数据从服务器推送到浏览器，通常使用 websocket。在这种情况下，数据源和数据接收者需要与同一个 websocket 服务器进行通信，它的工作方式类似于发布-订阅模式。如果您无法修改您的前台应用程序，您的问题更多是关于如何触发数据更改事件。 SQL Server 本身无法做到这一点，我看到有一些关于如何在 SQL Server 中观察数据变化的讨论，但我没有经验。我认为您需要一个组件来观察数据变化并将数据发送到服务器端的 websocket 服务器。如果您无法做到这一点，似乎从浏览器轮询以提取数据将是您唯一的选择。