You can send a http HEAD request to the server every 10 seconds. This will make the server just send the headers not the content. Then you can chech the 'Last-Modified' response header.
The jQuery function $.ajax(); supports a functionality quite similar to this. But rather then checking the Last-Modified http header jQquery sends requests to the server using the http If-Modified-Since header. It then checks if the server responds with response code 304 Not Modified.
This is a short HTML + Javascript example described the jQuery functionality:
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
var checkUrl="test.txt";
var firstCheck = false;
window.setInterval(checkForUpdate, 1000);
function checkForUpdate() {
$.ajax(checkUrl, {
ifModified : true,
type : 'HEAD',
success : function (response) {
if(firstCheck === false) {
firstCheck = true;
return;
}
$('#output').html('the site has been modified');
}
});
}
</script>
</head>
<body>
<div id="output">Not Modified</div>
</body>
</html>
However, the above jquery example didn't worked for me - using jQuery 1.8 and firefox.(Linux) + the apache2 web server. The success function will be called although the server responds with 304 Not Modified.
So I'll add another working example that implements my first suggestion above, here comes the javascript part:
var checkUrl="test.txt";
window.setInterval("checkForUpdate()", 1000);
var pageLoad = new Date().getTime();
function checkForUpdate() {
$.ajax(checkUrl, {
type : 'HEAD',
success : function (response, status, xhr) {
if(firstCheck === false) {
firstCheck = true;
return;
}
// if the server omits the 'Last-Modified' header
// the following line will return 0. meaning that
// has not updated. you may refine this behaviour...
var lastModified = new Date(xhr.getResponseHeader('Last-Modified'))
.getTime();
if(lastModified > pageLoad) {
$('#output').html('the site has been modified');
}
}
});
}
