Good evening everybody,
this is my very first question and I hope I’ve done my search in stack’s archive at best!!!
I need to monitor several devices by querying theyr mysql database and gather some informations. Then these informations are presented to the operator in an html table.
I have wrote a php script wich loads devices from a multidimensional array, loops through the array and gather data and create the table.
The table structure is the following:
<table id="monitoring" class="rt cf">
<thead class="cf">
<tr>
<th>Device</th>
<th>Company</th>
<th>Data1</th>
<th>Data2</th>
<th>Data3</th>
<th>Data4</th>
<th>Data5</th>
<th>Data6</th>
<th>Data7</th>
<th>Data8</th>
<th>Data9</th>
</tr>
</thead>
<tbody>
<tr id="Device1">
<td>Devide 1 name</td>
<td>xx</td>
<td><img src="/path_to_images/ajax_loader.gif" width="24px" /></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr id="Device2">
<td>Devide 1 name</td>
<td>xx</td>
<td><img src="/path_to_images/ajax_loader.gif" width="24px" /></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr id="DeviceN">
<td>Devide 1 name</td>
<td>xx</td>
<td><img src="/path_to_images/ajax_loader.gif" width="24px" /></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
The above table is directly populated when I first load the page; then, with a very simple function, i update this table every minute without reloading the page:
<script>
var auto_refresh = setInterval(
function() {
jQuery("#monitoring").load('/overview.php').fadeIn("slow");
var UpdateTime= new Date();
var StrUpdateTime;
StrUpdateTime=
('0' + UpdateTime.getHours()).slice(-2) + ':'
+ ('0' + UpdateTime.getMinutes()).slice(-2) + ':'
+ ('0' + UpdateTime.getSeconds()).slice(-2);
jQuery("#progress").text("Updated on: " + StrUpdateTime);
}, 60000);
</script>
The above code runs in a wordpress environment.
It comes out that when devices are too much and internet connection is not that fast, the script times out, even if i dramatically increase the timeout period. So it is impossible even to load the page the first time…
Therefore I would like to change my code so that I can handle each row as a single entity, with its own refresh period. So when the user first loads the page, he sees n rows (one per device) with the ajax loader image… then an update cycle should start independently for each row, so that the user sees data gathered from each database… then ajax loader when the script is trying to retrieve data, then the gathered data once it has been collected or an error message stating that it is not possible to gather data since hour xx:yy:zz.
So rows updating should be somewhat independent from the others, like if each row updating was a single closed process. So that rows updating is not done sequentially from the first row to the last.
I hope I’ve sufficiently detailed my problem.
Currently I feel like I am at a dead-end.
Could someone please show me somewhere to start from?
You have two problems here: The server queries to your monitored service and the request between the front user page and your server.
The first one you need to solve is the monitoring between your server and the different service. You shouldn’t call every single service upon user request. The server should queries the services by itself every x seconds or minutes at your choice and keep this data in its own database. Then, to send the data to the client, this server only need to query its own database which should be done almost instantly. This technique gives you the possibility to keep a history or to send email when it diagnostic a failure.
The second problem is to update your front end page you have many possibilities, but you should keep the number of request low. I’d suggest that you create a notification like request: your ajax request ask for all updated value since the last request (you send the timestamp in your request) then the server answer with all the data that was update since that time. When the response is received you can then update the received data in your table by mapping the ids.
This is mostly the track I’d go, but you still have some decisions to take, comment back if you need precision on my suggestion.