Reading data from the txt file using javascript, every 5 min.

advertisements

I'm trying to make the website that shows current temp at home and allows me to set the temp as I want. To read temp I use raspberry pi zero and python code to save the temp in every 5 min to the .txt file. The problem is that I need to read current temp on my website from that file in let's say very 5 min. I can use:

<head> <meta http-equiv="Refresh" content="s" /> </head>

But it doesn't look like a good choice so I though that I can use javascript and read data from the file. Unfortunately this function works only once no matter what I change in .txt file and refresh the web, output is still the same (looks like it save previous data to some kind of the global variable).

function readTextFile()
            {
                var rawFile = new XMLHttpRequest();
                rawFile.open("GET", 'text.txt', true);
                rawFile.onreadystatechange = function ()
            {
                if(rawFile.readyState === 4)
            {
                if(rawFile.status === 200 || rawFile.status == 0)
            {
                var allText = rawFile.responseText;
                alert(allText);
            }
        }
    }
    rawFile.send(null);
}

On the left side at this picture there are data from the txt file (using php), and at the alert handler are data using javascript and submit button. These data should be the same.

So the question is: Can I read from a .txt file when its dynamicly change? And if so, how can I do it or what function use to do it? I don't know javascript very well. I will be very grateful for help.


Using XHR to fetch records in a defined interval is not a good solution. I would recommend you to use JavaScript EventSource API. You can use it to receive text/event-stream at a defined interval. You can learn more about it here -

https://developer.mozilla.org/en-US/docs/Web/API/EventSource

For your application, you can do this -

JavaScript -

var evtSource = new EventSource('PATH_TO_PHP_FILE');

evtSource.onmessage = function(e) {
    //e.data contains the fetched data
}

PHP Code -

<?php
    header('Content-Type: text/event-stream');
    header('Cache-Control: no-cache');
    $myfile = fopen("FILE_NAME.txt", "r");
    echo "data:". fread($myfile,filesize("FILE_NAME.txt"))."\n\n";
    fclose($myfile);
    flush();
?>