Search code examples
javascriptajaxreactjsfrontenddashboard

Optimize ajax calls from React based dashboard


I'm currently working on a dashboard which consists of around 10-15 gadgets, each of which is showing some system parameters like CPU usage, Network Topology, Path status etc. real time. To achieve this, each gadget sends an ajax request to the back-end with a polling interval of around 30 secs. This almost works fine, but the problem I'm facing is that if the dashboard is left open, the browser crashes because of the huge number of ajax requests going from the dashboard. The browser CPU usage also goes very high. Increasing the polling interval is not a good idea because the stats have to be real-time. Is there a better way of achieving this (even if it means building it again) assuming that the amount of data returned is huge. Currently I'm using react(front-end) and PHP(back-end).


Solution

  • Try to utilize WebSockets instead of long pooling, though this needs both backend and frontend change, as alternative you can use pusher(implementation is straightforward because of a good documentation)