Live Page Updates

Sections on a web page with content that may go stale while the site visitor is on the page can be updated live — "live" being page updates occurring whenever updated content is available.

Depending on the urgency of the content and available server resources, availability of updates may be checked as often as several times a second.

Here are examples of content that may benefit from live updates:

• Sport scores.

• Evolving news.

• Total number of subscribers during a subscription drive.

• Number of items sold during a special promotion.

• An always-current running total of amount of money donated or pledged.

• A live update of reservations or number of seats available.

• Minute-by-minute stormy weather updates.

An Ajax engine retrieves the latest data and updates a div with the information. This happens at a frequency you specify — every ¼ second, every 3 seconds, every minute, whatever frequency makes sense for your implementation.

The data for the content update is obtained from the server, which in turn gets it from (as examples) a data file, a web page, a PHP script, or an external URL.

Server Resources

Depending on how this is implemented, the functionality can be resource intensive. These two items are key:

1. How often a request for an update is made.

   This is straight-forward. Requesting an update every ½ second uses 6 times as many resources as requesting an update every 3 seconds.

   Still, if responding to the request is low-resource, requesting an update with a frequency of less than 1 second might be done without unduly using more than a fair share of server resources.

2. How much resource is required to respond to a request for an update.

   The resources required to deliver up-to-the-millisecond data when Ajax requests it depends on how the data is acquired. Here are three examples.

   Requesting a plain text file —

   A plain text file uses a relative near zero amount of resources. The content of the entire file is sent back to the web page.

   The text file might be updated by other software as needed, instead of Ajax calling that software. It's a way to be frugal with resources and still have live web page updates.

   Requesting information from a MySQL table —

   This uses more resources than reading a plain text file because a script is required to get the data from the MySQL table and send it back to the browser.

   Still, reading MySQL table data is less resource intensive than writing table data. Using separate software to update the MySQL table only as needed, rather than being called at a pre-set frequency by Ajax, can require less server resources.

   Requesting information at a URL on another domain —

   This method requires the use of a script on the server to fetch the data, which uses some resources, but shifts much of the rest of the server resource requirements to the server at the other domain.

The resources are used per site visitor on the page. In other words, if three site visitors have the page loaded in their browsers concurrently, it will use three times the server resources as it would for only one site visitor.

Implementing Live Page Update

Three things are required to implement a live-updated web page.

1. A div with a valid id value to contain the content to be updated. Example:

   <div id="content-to-be-updated"></div>
   

   The div may contain content when it's first loaded into the browser or it may be empty as in the above example.

2. The JavaScript with Ajax engine. See further below.

3. A plain text file or a script from which to request the latest information.

   Because there are so many, many ways to obtain and respond with data, only instructions for a plain text method is provided as an example (in the Testing a Live Implementation section of this article).

   Be assured, however, that any accessible data that can be updated can also be made available to your web page. It may need special software, but it's doable.

Here's the JavaScript with the Ajax engine. Customization notes follow.

<script type="text/javascript">
/*
   Live Page Updates
   Version 1.0
   May 17, 2015

   Will Bontrager Software LLC
   https://www.willmaster.com/
   Copyright 2015 Will Bontrager Software LLC

   This software is provided "AS IS," without 
   any warranty of any kind, without even any 
   implied warranty such as merchantability 
   or fitness for a particular purpose.
   Will Bontrager Software LLC grants 
   you a royalty free license to use or 
   modify this software provided this 
   notice appears on all copies. 
*/

/* * ** *** *** *** *** *** ** * */
/* Start: Customization section. */
//
// Three places to customize.
//
// Place 1:
// Specify the id value of the div where the updated content is to be published.

var IDvalueOfDivToUpdate = "content-to-be-updated";

// Place 2:
// Specify the URI of the file, script, web page, or other resource where the 
//   latest data is to be obtained from. The URI is the URL minute the protocol 
//   and domain name. Example:
//         URL: http://example.com/script.php
//         URI: /script.php

var URIofResourceOnServer = "/data.txt";

// Place 3:
// Specify the number of seconds for the update interval. This may be a decimal 
//   number. As an example, 0.75 would specify every 3/4 second.

var HowManySecondsForUpdateInterval = 0.75;

//
/* End: Customization section. */
/* *** *** *** *** *** *** *** */

setInterval(GetUpdate,parseInt(HowManySecondsForUpdateInterval*1000));

function GetHTTPconnection()
{
   var http;
   try { http = new ActiveXObject("Msxml2.XMLHTTP"); }
   catch(e)
   {
      try { http = new ActiveXObject("Microsoft.XMLHTTP"); }
      catch(e2)
      {
         try { http = new XMLHttpRequest(); }
         catch(e3) { http = false; }
      }
   }
   return http;
} // function GetHTTPconnection()

function GetUpdate()
{
   var http = GetHTTPconnection();
   if(! http) { return false; }
   http.onreadystatechange = function() { DoUpdate(http); }
   http.open("GET",URIofResourceOnServer,true);
   http.setRequestHeader("Connection", "close");
   http.send('');
} // function RequestMethodGET()

function DoUpdate(http)
{
   if(http.readyState == 4)
   {
      if(http.status == 200) { document.getElementById(IDvalueOfDivToUpdate).innerHTML = http.responseText; }
      else { alert('\n\nContent request error, status code:\n'+http.status+' '+http.statusText); }
   }
} // function RequestMethodGETResponse()
</script>

Customization notes:

There are 3 places to customize, the customization section clearly marked in the script.

1. ID value of the div.

   Between the quotation marks, specify the id value of the div where the updated content is to be published.

2. Resource for updated data.

   Between the quotation marks, specify the URI of the file, script, web page, or other resource where the latest data is to be obtained from.

   For testing this system's basic functionality, use a plain text file. Let's assume it's named data.txt and resides in the document root of the domain. (The document root is the directory where your domain's main/index page is located.)

   The URI is the URL minus the protocol and domain name. Example:

   URL:	http://example.com/data.txt
   URI:	/data.txt

   The reason to use URI instead of URL is to ensure the protocol and domain match what's in the browser's address bar. (If both didn't match, Ajax would throw an error and refuse to obtain the data — a security feature built into browsers.)

3. Update frequency.

   Specify the interval, how frequently the Ajax engine shall request data to update the content of the div.

   The frequency is specified as number of seconds. Fractions of seconds may be specified with a decimal number. Examples:

   Specified Number	Interval
   1	1 second
   0.25	¼ second
   3.75	3¾ seconds

When the JavaScript is ready:

1. Create a web page with the div and the JavaScript. Upload the page to your domain and make a note of its URL.

2. Create a file named data.txt (assuming you specified "/data.txt" for the URIofResourceOnServer value in the JavaScript) and upload data.txt into the document root of your domain.

Type the URL of the web page into your browser to load the page.

Testing a Live Implementation

We'll assume the web page is loaded in your browser and the resource is the data.txt file.

Intermittently, update data.txt. Watch the information on the page change with the updated information.

As you see, web page content that quickly goes stale can be updated live while the page is being viewed.

(This article first appeared in Possibilities ezine.)

Will Bontrager