每隔5分钟使用javascript从txt文件中读取数据

每隔5分钟使用javascript从txt文件中读取数据

问题描述:

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.

enter image description here

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.

我正在尝试制作在家中显示当前温度的网站,并允许我根据需要设置温度 。 要读取temp,我使用raspberry pi零和python代码将每5分钟的临时值保存到.txt文件中。 问题是我需要从该文件中读取我网站上的当前临时文件,比如说5分钟。 我可以使用: p>

&lt; head&gt; &lt; meta http-equiv =“Refresh”content =“s”/&gt; &lt; / head&gt; 代码> p>

但它看起来不是一个好选择,所以我可以使用javascript并从文件中读取数据。 不幸的是,无论我在.txt文件中更改并刷新Web,此函数只能工作一次,输出仍然相同(看起来它将以前的数据保存到某种全局变量)。 p>

  function readTextFile()
 {
 var rawFile = new XMLHttpRequest(); 
 rawFile.open(“GET”,“text.txt”,true);  
 rawFile.onreadystatechange = function()
 {
 if if(rawFile.readyState === 4)
 {
 if(rawFile.status === 200 || rawFile.status == 0)
 {  
 var allText = rawFile.responseText; 
 alert(allText); 
} 
} 
} 
 rawFile.send(null); 
} 
  code>  pre> 
 \  n 

在这张图片的左侧有来自txt文件的数据(使用php),并且在警报处理程序中是使用javascript和提交按钮的数据。 这些数据应该是相同的。 p>

p>

所以问题是:我可以动态地从.txt文件中读取 更改? 如果是这样,我该怎么做或用什么功能来做呢? 我不太了解javascript。 我将非常感谢您的帮助。 p> div>

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"))."

";
    fclose($myfile);
    flush();
?>

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"