Timing problem

[lapgoch]

I have a RPI running a web server.

There are 2 browser links that i use to modify the data in a text file, named demoRX.txt.

Dependant on the data in the demoRX.txt file the status of my webpage images are displayed.

I have javascript that gets the demoRX.txt file every 3 seconds.

It decodes the text data and sets the images to be displayed accordingly.

Initially all works well.
But if there is no change in the demoRX.txt file data for a while then it all goes wrong.
The 3 second interval timer just gets longer and longer.
See the attached apache2 log file.

setTimeout(function repeat() {
  readTextFile("arduino/demoRX.txt");                                                // read demoRX.txt from arduino
  setTimeout(repeat, 3000);
}, 3000);


function readTextFile(file)
{
    var rawFile = new XMLHttpRequest();
    rawFile.open("GET", file, true);
    rawFile.onreadystatechange = function ()
    {
        if(rawFile.readyState === 4)
        {
            if(rawFile.status === 200 || rawFile.status == 0)
            {
                var allText = rawFile.responseText;                                    // read text file
                setImgState(allText)                                                // update image state
            }
        }
    }
    rawFile.send();
}


function setImgState(deviceState)
{
    const deviceImgs = document.querySelectorAll("img");                            // get images from dom
    for (let i = 0; i < 4; i++) {                                                    // loop through image div id's
        result = deviceState.substring(i, i+1);                                        // get next device state from text string in demoRX.txt
        
        if (result == "1") {                       
            document.getElementById(deviceImgs[i].id).src = "images/grnLed.jpg";    // show green led if device state is ON   
            
        } else {                               
            document.getElementById(deviceImgs[i].id).src = "images/redLed.jpg";    // show red led if device state is OFF
        }
    }   
}

 

[FResher]

Hello !

as the 'repeat' function will create a timer, to launch again 'repeat', you're in an infinite loop, a recursive call of the 'repeat' function.

one thing you can do, is to write in the 'repeat' function a var being 'increase' ( counter++ ).

you'll see where it goes in a first step. the value of your 'debugging var' will be out of what you can see on screen ... because of the recursion call of 'repeat' applied.

as visible result, you can see the time tick becoming large, maybe more than 3 seconds.. but the increment will be bigger than all the visible effect.
because a loop is very fast, more than the timer you use.

try with : setInterval(function, milliseconds) , that trigger an action , and call function with a tick = millisecond.
replace by 'setinterval()' , the 'setTimeOut()' in your call.

setInterval(function repeat() {
  readTextFile("arduino/demoRX.txt");                                                // read demoRX.txt from arduino
  // no repetition nor call about 'repeat()', setInterval() is enough.
}, 3000);

 

[lapgoch]

Thanks for the reply.
I changed the code to setInterval.

counter = 0;

function updater() {
    counter += 1;
    console.log(counter);
    readTextFile("arduino/demoRX.txt");                                                // read demoRX.txt from arduino
}

setInterval(updater, 3000);

Sadly the problem is still there.
After further checking it seems the function to read the demoTX.txt is reading data from cache.
Then after some undetermined time it then reads data from the demoTX.txt file.
Giving the weird delay in updating the webpage images.
When I disable webpage caching in firefox about:config , everything works perfectly.

I now need to find out how to disable webpage caching for this webpage.
I added the following code to the webpage header , but it doesn't disable caching

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
 <meta http-equiv="Pragma" content="no-cache">
 <meta http-equiv="Expires" content="0">

How do I disable caching for specific websites?

 

[FResher]

if you know a bit about Php, you can pick the value in the file by a server sided answer contening the 'datas',
the readTextFile function get the file locally, then your read the value in.

A php script could by server side :

• open the file
• read the file
• send back the value you need.

this way , you let the client cache as it is.

<?php

 $res = fopen("file_name_here.txt", "r"); // opening the file

  $OUTPUT = ""; // init the var for output

    while(!feof($res)){ // reading all lines by a loop
                
     $LINE = fgets($res); // allocating the read line to var $LINE
                
     $OUTPUT .= $LINE ; // grouping all read line in a buffer var
                
    }

 echo($OUTPUT) // answer by Echo, perfect for ajax feedback


;?>

 

[lapgoch]

if you know a bit about Php, you can pick the value in the file by a server sided answer contening the 'datas',
the readTextFile function get the file locally, then your read the value in.

A php script could by server side :

• open the file
• read the file
• send back the value you need.

this way , you let the client cache as it is.

<?php

 $res = fopen("file_name_here.txt", "r"); // opening the file

  $OUTPUT = ""; // init the var for output

    while(!feof($res)){ // reading all lines by a loop
              
     $LINE = fgets($res); // allocating the read line to var $LINE
              
     $OUTPUT .= $LINE ; // grouping all read line in a buffer var
              
    }

 echo($OUTPUT) // answer by Echo, perfect for ajax feedback


;?>

I have an arduino that uses php to send the status of it's output devices to the rpi server.

The demoRX.php file writes the data to the demoRX.txt file.

I then uses javascript as shown above to read the demoRX.txt file and update the webpage status.
Is there a better / easier way to do this that can bypass caching the data?