CODEWITHSUNDEEP
node.js
MartinD
MartinD

Reputation: 21

Live update with node

I'm learning programming and already learn a bunch of stuff with node like express, async request etc... I'm travelling a lot and i'm trying to build a webapp for my daughter where i can enter my flights number and date and i will show a simple page with city A a ligne, a small place in between and city b when the plane is in the air otherwise a little cartoonish man sleeping.

So i'm good with fetching data with an api and getting the departure and arriving time of my flights, the cities names etc and i'm good with placing the little plane at the good place (like at 1/3 of the line if i'm 1 hour into a 3h flight) but only if i refresh the page.

So my question is: what should i use to make it live so the plane will move without the need of refreshing the page. i don't want to refresh it manualy all the time since i want to put it on a screen in my daughter room and let it live all the time. i tought about putting the css inside the HTML and use JSX to place css animation time but i guess their could be a better way.

I'm doing it since i like coding so obviously i don't look for someone to write my code but to have some package or somewhere to go and read to find a solution... I started to learn react 2 days ago so it may be the key...

Thanks

Upvotes: 0

Views: 136

Answers (2)

Alpit Anand
Alpit Anand

Reputation: 1248

There is a concept known as Polling, what it means, in short, you have to continuously ask the data from the server after a certain interval, that is there some new data available.

For that, you need to call API after a certain interval (make sure you don't do too freq. API calls to a 3rd party server) and update on the frontEnd for the same.

To achieve that you can use setInterval, please check it docs on MDN on how to use it.

Alternatively, if the 3rd party server provides sockets, you can use that too.

MDN link

Upvotes: 0

MilesZew
MilesZew

Reputation: 687

I would periodically request the data in a setInterval, and then update accordingly. Something like:

setInterval(() => {
/*api request stuff*/
/*code to update your webapp based on the data*/
}, /*however often you want to update, in milliseconds*/)

I'm sure exactly how your webapp works, so I can't really help you further unless you show some code.

Upvotes: 1

Related Questions