Web Auto Refresh
How to make a web page auto-refresh
People often ask "How to enable active-content on a Digi Python-enabled gateway?", and the answer is with a huge investment and serious hard work. Many Digi customers accomplish this not with the gateway, but by hosting the web page on a PC which enables use of industry-standard server tools. The PC server fetches data from the gateway and pushes it up actively to the end user.
However, do you really need active-content? Are you really browsing dynamic multi-user databases which update in complex ways all of the time?
Keep It Simple
In reality, you probably just want the page to refresh itself from time to time. If so, you should first consider this good, old-fashioned HTML code:
<META HTTP-EQUIV="refresh" CONTENT="15">
Adding this one line to the page your gateway feeds back to the browser causes the browser to refresh (or reload) the page in 15 seconds. Your gateway code is still as sweetly simple as before, but the user display auto-updates.
Using JavaScript
This can also be accomplished using JavaScript. This can give an added benefit of only reloading a portion of the page that contains the data, reducing the bandwidth and load on the device. There are a number of ajax libraries that simplify this process.
- Prototype is a framework that aims to make web development easier. It provides a periodical updater that can update a portion of a page while increasing the time between refreshes if the data is not changing.
- JQuery does not directly support this function like prototype but there is currently a plugin here.
If a heavyweight framework is too much a repeated refresh can be accomplished with a combination of setTimeout and XMLHttpRequest. There is a setInterval function in javascript but it is recommended not to use it, as it can cause the same refresh occurring before the previous one has completed.
/* function updates the "output" element with the result from the
"/update" url then calls itself again in 4 seconds
*/
function updater(){
var request = createXMLHttpRequest();
// add time to GET request to prevent caching issues
request.open("GET", "/update?" + (new Date()).getTime(), true);
request.onreadystatechange = function() {
if (request.readyState == 4) {
document.getElementById("output").innerText = request.responseText ;
setTimeout("updater()",4000);
}
}
request.send(null);
}
/* cross browser way of creating XMLHttpRequests */
function createXMLHttpRequest() {
if (typeof XMLHttpRequest != "undefined") {
return new XMLHttpRequest();
} else if (typeof ActiveXObject != "undefined") {
return new ActiveXObject("Microsoft.XMLHTTP");
} else {
throw new Error("XMLHttpRequest not supported");
}
}
Cost as in Real Dollars!
Now before you run off and make every page auto-refresh every one (1) second, just be aware that someone might actually want to see your web pages over cellular or satellite ... and leaving such an auto-refresh page open over a week-end could cost them thousands of $$$. Plus once a second is likely overkill because very few real world systems actually change every second. Therefore you'd be wiser to refresh at most every 15 second or even once a minute, then assume a user who cares to see faster refreshes for a short time during a test can manually refresh faster.
One solution is to have a FIRST copy of the page not auto-fresh, and then have TWO buttons on that page. One manually refreshes the page (just like the browser refresh button), while the other button is labeled "Start Auto-Refresh". This second button moves to a second page that looks the first, but includes the auto-fresh every 15 seconds. The second page has a single button to return to the manual-refresh page.
This doesn’t fully solve the cost issue, but at least the user had to actively “select” to auto-refresh. Thus the boss cannot say I didn’t know it would cost so much to leave that page open when the bill comes!
PDF
