Real-time page content updates

Hi.

I would like data on a webpage to update to the latest info in real time without refreshing the page - like a data feed but just display info.

I am able to write an admin centre in PHP that will write contents to a file on the server.

But i cant work out the best way to have the webpage check for new data. I was going to use a loop that checks the last modified time of the source data file but this creates stack overflow errors. Basically all i need is for a page to check for a modified file then refresh itself if found - only needs to update if it finds the data is out of date so most checks will result in no change.

Anyone know how to do this efficiently?

Many thanks!
robertybobAsked:
Who is Participating?
 
Ryan ChongCommented:
You may try something like this:

test.php:

<html>
<head>
</head>
<script language="javascript">
      var refreshInterval = 5000; //5 seconds
      var roomArray = new Array();
      
      var timeinfo = "";
      function loadStatus(url) {
            window.status = "loading status.."
            xmlhttp=null
            if (window.XMLHttpRequest) {
                  xmlhttp=new XMLHttpRequest();
            } else if (window.ActiveXObject) {
                  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            if (xmlhttp!=null) {
                  xmlhttp.onreadystatechange=state_Change
                  xmlhttp.open("GET",url,true)
                  xmlhttp.send(null)
            } else {
                  //alert("Your browser does not support XMLHTTP.")
            }
      }
      function state_Change() {
            if (xmlhttp.readyState==4) {
                  if (xmlhttp.status==200) {
                        try {
                              rtntext=xmlhttp.responseText;
                              writeStatus(rtntext);                              
                              window.status = "";
                        } catch(e) { window.status = ""; }
                  }
            }
      }
      
      function writeStatus(v) {
            document.getElementById("rtn").innerHTML = v;            
      }
      
      rnd.today=new Date();
      rnd.seed=rnd.today.getTime();
      
      function rnd() {
            rnd.seed = (rnd.seed*9301+49297) % 233280;
            return rnd.seed/(233280.0);
      }
      
      function rand(number) {
            return Math.ceil(rnd()*number);
      }


      function getProgressUpdate() {
            rkey = rand(999999999999);
            
            loadStatus('test2.php?rkey='+rkey);
            setTimeout("getProgressUpdate()",refreshInterval);
      }
      
</script>
<body onLoad="getProgressUpdate()">
Returned value:
<div id="rtn"></div>
<p><a href="#" onClick="rkey = rand(999999999999);loadStatus('test2.asp?rkey='+rkey);return false;">Refresh now</a></p>
</body>
</html>

test2.php:

<?php

echo date('l dS \of F Y h:i:s A');

?>


Hope this helps
0
 
Ryan ChongCommented:
try use AJAX technology, more info:
http://www.w3schools.com/ajax/
0
 
robertybobAuthor Commented:
ok thx - looks promising but have to read thru to see if i can utilise it. have decided that might be best to store a simle timestamp in a file and get ajax to continuously loop to retrieve that and check against the last imestamp stored - if different then refresh the page.......

sure this must be easy but need to find out how to get ajax to loop and retrieve forever without timing out or clogging up.

will let you know if ajax seems like the solution - if you have readily available code to do what i need that would be much appreciated

many thanks
0
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
HonorGodSoftware EngineerCommented:
One think you might want to consider is the user of a timer interval - have JavaScript invoke a funciton of your choice, whenever the interval timer pops.

<html>
<head>
<title> window.setInterval() </title>
<script type='text/javascript' src='../objDisplay.js'></script>
<script type='text/javascript'>
  var count   = 0;
  var timerID = null;

  function update( id ) {
    document.getElementById( id ).innerHTML = ++count;
  }

  function doTimer() {
    if ( !document.getElementById ) return false;
    var status = document.getElementById( 'status' );
    var button = document.getElementById( 'StopStart' );
    if ( timerID ) {
      timerID = window.clearInterval( timerID );
      status.innerHTML = 'Stopped';
      button.value = 'Start';
    } else {
      timerID = window.setInterval( 'update("count")', 2500 );
      status.innerHTML = 'Running';
      button.value = 'Stop';
    }
  }

  function ResetTimer() {
    count = 0;
    document.getElementById( 'count' ).innerHTML  =  count;
    document.getElementById( 'status' ).innerHTML = 'Reset';
  }
</script>
</head>
<body onload='doTimer()'>

<table border='1'>
  <tr>
    <td>Count:</td>
    <td id='count' align='center'>&nbsp;</td>
  </tr>
  <tr>
    <td>Status:</td>
    <td id='status'>&nbsp;</td>
  </tr>
  <tr>
    <td align='center'>
      <input id='StopStart' type='button' value='Stop'  onclick='doTimer()' />
    </td>
    <td align='center'>
      <input id='Reset'     type='button' value='Reset' onclick='ResetTimer()'>
    </td>
  </tr>
</table>

</body>
</html>
0
 
Ryan ChongCommented:
ah.. try change lines:

<a href="#" onClick="rkey = rand(999999999999);loadStatus('test2.asp?rkey='+rkey);return false;">Refresh now</a>

to:

<a href="#" onClick="rkey = rand(999999999999);loadStatus('test2.php?rkey='+rkey);return false;">Refresh now</a>

for above sample, and try customized accordingly. cheers
0
 
robertybobAuthor Commented:
thx ryan - had to adjust a few things to tie in exactly but this code does indeed work well
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.