Timing problem

Joined
Jul 2, 2022
Messages
4
Reaction score
0
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.

1682939455420.png


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

1682939502937.png


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.

1682939574385.png


Code:
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
        }
    }   
}
 
Joined
Sep 4, 2022
Messages
129
Reaction score
16
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.


JavaScript:
setInterval(function repeat() {
  readTextFile("arduino/demoRX.txt");                                                // read demoRX.txt from arduino
  // no repetition nor call about 'repeat()', setInterval() is enough.
}, 3000);
 
Joined
Jul 2, 2022
Messages
4
Reaction score
0
Thanks for the reply.
I changed the code to setInterval.

Code:
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

Code:
<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?
 
Joined
Sep 4, 2022
Messages
129
Reaction score
16
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:
<?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


;?>
 
Joined
Jul 2, 2022
Messages
4
Reaction score
0
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:
<?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.

1683029190702.png


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

1683029264760.png


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?
 
Last edited:

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,792
Messages
2,569,639
Members
45,352
Latest member
SherriePet

Latest Threads

Top