php: reload div on file-change

Question

I have a Raspberry Pi with some buttons connected to it that change a value contained in some file, say "setting.txt". For example, its contents might be as simple as

and that's it. The buttons trigger a process that changes the content of this file (e.g. 42 becomes 43).

The value needs to be displayed on a website run by Apache2, so I built the following:

<html>    
    <body>
        <div id="fileContent"></div>
    </body>

    <script type="text/javascript">

     window.onload = function() {
         var $interval = 100;
         setInterval(updateDivByPHP, $interval, "fileContent", "getcontent.php");
     }

     function updateDivByPHP($id, $phpFile) {
         var xmlhttp=new XMLHttpRequest();
         xmlhttp.onreadystatechange = function() {
             if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
                 document.getElementById($id).innerHTML = xmlhttp.responseText;
         }

         xmlhttp.open("POST", $phpFile);
         xmlhttp.send();
     }

    </script>    
</html>

where getcontent.php is as simple as

<?php
include "setting.txt";
?>

Having set the refresh interval to 100ms, I expected the refresh delay after a file-change to be resonably short, but it takes up to 2 whole seconds for the contents to be updated.

Is there a fix or more efficient/cannonical approach to what I want?

EDIT

It would be even better if the file could be skipped altogether and pipes its output directly to the website, somehow...

Marcos Casagrande · Accepted Answer · 2016-01-31 17:15:15Z

1

Don't use include, use readfile or file_get_contents, include has some caching mechanism (Can't find the info about it, but check my example below) and it's slower since it has to evaluate the file.

<?php
    readfile("setting.txt");
    //echo file_get_contents("setting.txt");
?>

I did some tests using include in apache:

<?php
    include("test.txt"); //outputs "hi"

    //override "test.txt"
    file_put_contents("test.txt", "bye");

    readfile("test.txt"); //outputs "bye"
    include("test.txt"); //outputs "hi"
?>

If you want to send the file as soon as it's been modified into the browser, you should use websockets, and a file watcher. (You can use node.js to do it, using: fs.watch and socket.io)

Some file watcher modules for node.js

edited Jan 31, 2016 at 17:15

answered Jan 31, 2016 at 17:01

Marcos Casagrande

40.7k11 gold badges93 silver badges107 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

JorenHeit Over a year ago

Thanks, so simple :-)

Marcos Casagrande Over a year ago

You're welcome, check my edited answer if you want to update the content as soon as possible.

JorenHeit Over a year ago

I'll look into that. Web programming is completely new to me, so it's quite a bit of getting used to...

j0k4b0 · Accepted Answer · 2016-01-31 16:57:23Z

0

I think you should use Jquery, somethink like that: http://api.jquery.com/jquery.post/ and for php file_get_contents() http://php.net/manual/de/function.file-get-contents.php

answered Jan 31, 2016 at 16:57

j0k4b0

3571 gold badge3 silver badges14 bronze badges

Collectives™ on Stack Overflow

php: reload div on file-change

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related