I'm seeking the best way to keep the data up-to-date when dealing with web socket async requests, especially data that contain time information.

I have a dashboard, when I logged/pressed feed I updated the nextFeed time to feedingInterval + the current logged time.

feedingInterval = 2 hrs

I used to do form submit, and page refresh.

Also, I used to do location.reload() every 1 minute to keep my nextFeed time up-to-date when my user opened up the link on a machine connected to a TV.

nextFeed time always up to date, worse case there is 1 mn lagged.

NOW

To enhance the UX:

I don't use form submit anymore, so no page refresh, I use Ajax POST to a web socket route to broadcast to all my devices. When I receive any push notifications from Pusher Cloud, I update the DOM live dynamically on all my devices.

Issue

I used to refresh my page every 1 minute, since I didn't do ( location.reload(); ) anymore. My feeding time will become stale (not up-to-date).

Current solution:

I created an API to get the nextFeed time, called it every 5 seconds, and update DOM every 5 seconds. I notice my browser seem very hot since, maybe due too much requests in a minute.

Then you might say/think... just called every minute then ...

But ... If I make a call every one 1 minute then my users wont' have up-to-date information which defeats the purpose of me doing the websocket in the first place.

What should I do to have the best UX, but not too compromise my performance?

https://www.bunlongheng.com/baby/5db53c4c-5be4-4aa2-b9f6-b564acb871ac?code=d3s!gn