CODEWITHSUNDEEP
angular
Eric B
Eric B

Reputation: 85

Automatically refresh page calling web services

I am new to Angular and have a question regarding retrieving data from a web service when data in the database has changed.

There are 2 "parts" to the system that I am working on: A Windows application that runs front office (not Angular) and a Angular application that runs on 6 tablets out in the various locations of complex. The complex is fairly small and all of the systems have good, constant network connectivity.

The front-office application (not Angular) runs in the main office. It is used to update a SQL Server database with the names of current customers when they "check in" to the complex and also to "move" the customer from 1 location in the complex to another and/or "check out" the customer from the complex.
This application is Windows application that does direct database access to the database using ADO.NET and SQL Server stored procedures. This is a legacy application that cannot at this time be changed.

The other part is an Angular 6 application that is accessed from 6 tablets via a web page. The function is to allow users to
1) View the list of current customers and their location in the complex
2) "Move" a customer from 1 location to another
3) "Check out" the customer from the complex.

The actions are performed by the by calling RESTful web services (written in C# & .NET Core) for the specific action:
A) Get the list of current customers and their location,
B) "Move" a customer to a different location
C) "Check out" a customer from the complex
The data is stored in a SQL Server database.
The UI uses various PrimeNG components (dropdowns, tabs, and a table).

From reading various articles, blogs and posts, it seems to me that there is a way to trigger the client to update when data is changed on the server since one of the main "how to" examples is a "chat" application that does updates within the application when someone enters a new message.

What I am not able to determine is how to cause the update on the tablets when the customer is moved or checked-out. I thought about using a timer or a refresh, but that method would seem to possible cause issues if customer location the tablet was being updated on the tablet when the refresh occurred, cause a lot of unnecessary traffic if the database data was not being changed, or the refresh may not happen at the correct time to show customer changes (the refresh could happen before updates were made but then updates happen before the next database update).

Right now I have a "refresh" button that calls the web services to get the customers and locations, but that requires the user to manually activate it and they may not remember to do so and therefore have incorrect data.

Any pointers would be appreciated.

The Angular 6 application is structured as follows:
1. Separate Interfaces for the Customer Information (Name, Date, Time) and Location
2. A "Data" Service that calls the Web Service for the specific action
3. A "Local" Service that contains the logic to call the "Data" Service, manipulate the data coming back from the "Data" Service call
4. A "Main" component that handles UI events, displays error messages and toast messages
5. The HTML page that is the UI

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);
    }

Upvotes: 0

Views: 1842

Answers (3)

Simon
Simon

Reputation: 175

We can push data from server to browser, typically using websocket. In this case, data source and data reciever need to communicate with the same websocket server, it works like publish-subscribe pattern. If you cannot modify your front-office application, your question is more about how to trigger the data change events. SQL Server itself cannot do this, I see there's some discussion about how to watch data change in SQL Server but I have no experience. I think you need a component to watch data change and send data to websocket server on server side. If you cannot make this, seems polling from browser to pull data will be your only choice.

Upvotes: 0

Hien Nguyen
Hien Nguyen

Reputation: 18975

You can use setInterval to call API each interval like this

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

But you call API this way is not good solution it same with Deny of Service if the concurrent user increase.

I suggest you change to web socket to implement service if your backend is Java. It is better performance for RealTime request.

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

If your backend is ASP.NET Web API you can use SignalR Package https://www.npmjs.com/package/@aspnet/signalr

We had tested between Web API and SignalR for this case, if you WebAPI, the CPU and Memory of browser increase quite fast and we select SignalR as solution.

If your backend does not alway change, you can use cached in backend for better performance at web server.

If you use SQL Server, you can use SQL Dependency to notify latest update from SQL (add new customer, update or delete customer) A reference about use SQL Dependency and SignalR

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

Upvotes: 1

Ala Abid
Ala Abid

Reputation: 2326

You can do polling every X seconds, and update your data on every request. Or you can use web sockets. For the first method, refer to this answer https://stackoverflow.com/a/42920844/7179294
Also check this answer for more details https://stackoverflow.com/a/54629027/7179294

Upvotes: 0

Related Questions