How can I get Chrome to watch a file and reload it when it changes?

Question

I have a persistent web page, part of which displays a small file that changes from time to time. My solution was to Ajax that file in every second, so that I see it soon after it changes. I did this:

   function loadDoc() {
     var xhttp = new XMLHttpRequest();
     xhttp.onreadystatechange = function() {
       if (this.readyState == 4 && this.status == 200) {
         document.getElementById("display").innerHTML = this.responseText;
         setTimeout(function(){loadDoc();}, 1000);
       }
     };
     xhttp.open("GET", "newstuff.html", true);
     xhttp.send();
   }

(Newbie here; this is my first Ajax code, almost my first JavaScript. Be gentle.)

This works great, as long as the file changes frequently! But if not, the requests come in more and more slowly, as shown by the log of my SimpleHTTPServer:

127.0.0.1 - - [21/Feb/2017 19:12:51] "GET /newstuff.html HTTP/1.1" 200 -
127.0.0.1 - - [21/Feb/2017 19:12:52] "GET /newstuff.html HTTP/1.1" 200 -
127.0.0.1 - - [21/Feb/2017 19:12:53] "GET /newstuff.html HTTP/1.1" 200 -
127.0.0.1 - - [21/Feb/2017 19:12:55] "GET /newstuff.html HTTP/1.1" 200 -
127.0.0.1 - - [21/Feb/2017 19:12:57] "GET /newstuff.html HTTP/1.1" 200 -
127.0.0.1 - - [21/Feb/2017 19:12:59] "GET /newstuff.html HTTP/1.1" 200 -
127.0.0.1 - - [21/Feb/2017 19:13:01] "GET /newstuff.html HTTP/1.1" 200 -
127.0.0.1 - - [21/Feb/2017 19:13:03] "GET /newstuff.html HTTP/1.1" 200 -
127.0.0.1 - - [21/Feb/2017 19:13:06] "GET /newstuff.html HTTP/1.1" 200 -
127.0.0.1 - - [21/Feb/2017 19:13:09] "GET /newstuff.html HTTP/1.1" 200 -
127.0.0.1 - - [21/Feb/2017 19:13:12] "GET /newstuff.html HTTP/1.1" 200 -
127.0.0.1 - - [21/Feb/2017 19:13:15] "GET /newstuff.html HTTP/1.1" 200 -
127.0.0.1 - - [21/Feb/2017 19:13:19] "GET /newstuff.html HTTP/1.1" 200 -
127.0.0.1 - - [21/Feb/2017 19:13:23] "GET /newstuff.html HTTP/1.1" 200 -

...and it just gets worse, until the file changes, after which the requests come in every second again.

I presume that it's Chrome's cache that's doing this, with a growing backoff. The requests come every second if I have Developer Tools open (I set the appropriate flag). Other queries here talk about clearing the cache---can I force that from JavaScript somehow? Or is there another way to do this? Any help appreciated.

How often does the file actually change? Polling every second seems a bit excessive: even if it actually changes that frequently would it not be good enough from the user's point of view to update every thirty seconds, or every fifteen? — nnnnnn, Feb 22 '17 at 02:19
@nnnnnn The file changes perhaps every 30--40 seconds, but from the user's point of view I need the display to change as soon as possible when it does change. — user620316, Feb 22 '17 at 02:26
@SLaks I'm not familiar enough with Node.js in the browser to know how to do this. Can you send a pointer? — user620316, Feb 22 '17 at 02:27
https://github.com/jprichardson/reload https://github.com/patrick-steele-idem/browser-refresh — SLaks, Feb 22 '17 at 02:29
@SLaks Thanks, but this doesn't help me, because it's a way to refresh the browser (which I could do via Applescript). See my comment in response to New Bie's solution below. The whole point of doing it with Ajax is to avoid a refresh, which produces too much flicker. — user620316, Feb 22 '17 at 02:32
Maybe look into "long polling" ajax. If the server doesn't return a response to the ajax request until the file changes then the client will get the update as soon as it happens. — nnnnnn, Feb 22 '17 at 02:37
@nnnnnn Wow. Who knew? This is exactly what I want: I get the updates even faster, with much less load on the system. Of course I have to build my own server instead of just typing "python -m SimpleHTTPServer", but that's not the end of the world. Indeed, it's pretty much all done for me here: https://code.tutsplus.com/tutorials/learning-server-side-javascript-with-nodejs--net-10044 — user620316, Feb 22 '17 at 02:47

How can I get Chrome to watch a file and reload it when it changes?

0 Answers0