Reading data from txt file using javascript, every 5 min
Question
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.
2 answers
solution1
2 ACCPTED 2017-06-05 13:08:05
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();
?>
solution2
1 2017-06-05 12:58:29
you need update your .txt file in some interval, for save changes, after set attribute id="textarea"
//use jOuery
var interval = setInterval(function(){ myFunction() },5*60*1000); // 1000=1 second
function myFunction(){
$.get('server_address',{param1:1,param2:2},function(response){
//if is textarea or input
$('#textarea').val(response);
//if is block div, span or something else
//$('#textarea').text(response);
});
}
server_address - is page where you read file content, and print them .... if it is php, then file "write.php" with code like
<?php
echo(file_get_contents('some.txt'));
{param1:1,param2:2} - is object, with params, what you send to "server_address", like {action:'read',file:'some.txt'} or something other
response - is text what is print in page on "server_address"
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.