Show a txt file on a webpage which updates every second

Question

I'm sort of shooting in the dark here; I have no knowledge how to do this so some pointers and/or links to helpful tutorials would be great:

I have a website that I want to display a text file (server log). Probably embedded. The problem is, this file is updated whenever events happen in the server (faster than half a second usually). How can I make it so the webpage displays the file in real time, meaning showing a live feed of the file?

My guess is that it would use javascript and AJAX but my knowledge on both are pretty limited. Any pointers and help would be appreciated :)

score 10 · Accepted Answer · edited Oct 19 '15 at 06:44

My answer uses PHP and Ajax though changing to ASP or any other language wont be hard.
In the head

    <script type="text/javascript">

        function Ajax()
        {
            var
                $http,
                $self = arguments.callee;

            if (window.XMLHttpRequest) {
                $http = new XMLHttpRequest();
            } else if (window.ActiveXObject) {
                try {
                    $http = new ActiveXObject('Msxml2.XMLHTTP');
                } catch(e) {
                    $http = new ActiveXObject('Microsoft.XMLHTTP');
                }
            }

            if ($http) {
                $http.onreadystatechange = function()
                {
                    if (/4|^complete$/.test($http.readyState)) {
                        document.getElementById('ReloadThis').innerHTML = $http.responseText;
                        setTimeout(function(){$self();}, 1000);
                    }
                };
                $http.open('GET', 'loadtxt.php' + '?' + new Date().getTime(), true);
                $http.send(null);
            }

        }

    </script>

In the Body

    <script type="text/javascript">
        setTimeout(function() {Ajax();}, 1000);
    </script>
    <div id="ReloadThis">Default text</div>

</body>

Now using loadtxt.php read the values of the text file

    <?php
        $file = "error.txt";
        $f = fopen($file, "r");
        while ( $line = fgets($f, 1000) ) {
            print $line;
        }
    ?>

Thank you for providing something that's much easier to understand, edit and adjust (i.e. readable). I've been looking and working on my tool for 3 days and this is the first that's worked as posted. Since it's easier to read and understand than others, making the needed adjustments is much easier as well. Cheers! — Hummdis, Mar 20 '21 at 06:37

score 8 · Answer 2 · answered Jun 23 '11 at 10:08

8

Using jQuery, you could do the following

setInterval(function() {
    $('#element').load('/url/to/file');
}, 1000);

Would refresh the div with ID element with the file contents every 1 second

answered Jun 23 '11 at 10:08

LeeR

1,609
11
29

I'll try this out later and let you know how it goes! – dukevin Jun 23 '11 at 12:18

score 0 · Answer 3 · answered Jun 23 '11 at 07:53

0

You could use jQuery .get to get the file every few seconds and update the page to show the contents.

answered Jun 23 '11 at 07:53

Bemmu

17,849
16
76
93

The function wich Kevin need is '.setInterval(Method, Duration)' – Reporter Jun 23 '11 at 07:55
would you mind providing an example of some jquery and how I would implement it? – dukevin Jun 23 '11 at 08:00
http://jquery-howto.blogspot.com/2009/04/ajax-update-content-every-x-seconds.html – Jon Jun 23 '11 at 08:26

score 0 · Answer 4 · edited May 23 '17 at 12:25

There are various ways of doing this...

You could look into long polling.

Stick a meta refresh tag to refresh the page every X seconds.

tail -f /path/to/log.log in terminal will open a live preview of the last few lines of that file - this is what I do if I need to read the error logs as I debug.

Or simply refresh the page manually as you go, it might be annoying having the page change it's contents automatically.

As you have said your file is very large, I would use the PHP file() function to just grab the first X amount of lines from a file to keep bandwith down and readability up!

score 0 · Answer 5 · answered Jun 23 '11 at 10:47

0

Others have talked about loading the log file every refresh but depending on the size of the file this migth be a bad idea. You might want to create a server side page that will read the log file and keep track of how much of it has already been given to you and only give you the new bits. If its a 10k file it would be annoying (and potentially laggy) to have this transferred to you every second.

Otherwise other people seem to have covered most of the client side stuff.

answered Jun 23 '11 at 10:47

Chris

27,210
6
71
92

In that case you definitely don't want to be downloading the whole file every time you do an update and will want to do this kind of incremental update. I'm not really sure on the best way to do this but you probably want to get a general idea of how you do it in your head and then ask for help on specific bits in their own question so this doesn't get too broad. – Chris Jun 23 '11 at 13:07

score 0 · Answer 6 · answered Jun 20 '21 at 22:50

0

use this

setInterval(function() {
jQuery.get('file.txt', function(data) {
   alert(data);
   //process text file line by line
   $('#div').html(data.replace('n','
'));
});
  
 }, 1000);

https://www.sitepoint.com/jquery-read-text-file/

answered Jun 20 '21 at 22:50

Joseph Lim

11
1
4

score 0 · Answer 7 · answered Jan 10 '22 at 00:50

0

Finally, yes the script and the div id="ReloadThis" work fine together ! It also works to display info from a PHP file which queries the text file so the incoming text can be formatted before being displayed in the div element.

answered Jan 10 '22 at 00:50

P GS

21
2

Show a txt file on a webpage which updates every second

7 Answers7

Linked