CODEWITHSUNDEEP
angulartypescript
Pan Michal
Pan Michal

Reputation: 306

Angular detect changes in API

I have 2 devices, one running Angular WebApp, and 2nd only used to adding items to database. Both devices are connected to same REST API.

On first device I getting JSON containing items:

[
{
"id": 42,
"item": "Jajka"
},
{
"id": 48,
"item": "Kapusta"
},
{
"id": 49,
"item": "Ziemniaki"
}
]

And on second device I performing POST action adding new item to database.

How should I check for changes on first device without refreshing page?

Fetching script:

  fetchData()
  {
    this.overlay = true;
    this.valuechanges = this.dataService.getRecipes()
    .subscribe(data => this.recipes$ = data);
    this.overlay = false;
  }

Fetching service:

export class DataService{
  apiUrl = 'http://localhost:3000/shoppinglists';

  constructor(private _http: HttpClient) { }

  getItems() {
    return this._http.get<ShoppingList[]>(this.apiUrl);
  }

Thanks for any answers

Upvotes: 0

Views: 1713

Answers (2)

Ajvar1
Ajvar1

Reputation: 147

I don't know if I get what you want to do but you would have to use websockets for realtime communication or you can use polling.

interval(1000).pipe(
    switchMap(() => this.dataService.getRecipes()),
    distinctUntilChanged()
).subscribe(console.log);

Upvotes: 1

hankchiutw
hankchiutw

Reputation: 1662

You need some mechanism to notify devices that data changed on server. HTTP can't do that(or at least not good at doing that). One mature solution is WebSocket.

Basically you need WebSocket client and server. In Angular, you could use rxjs/webSocket as the WebSocket client.

Upvotes: 1

Related Questions