时间戳

首页 > 解决方案 > 自动刷新页面调用web服务

angular - 自动刷新页面调用web服务

问题描述

我是 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);

本地服务.ts

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

数据服务.ts

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

标签： angular

解决方案

您可以使用 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在后端使用以在 Web 服务器上获得更好的性能。

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

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

推荐阅读