jbminn

4 minute read

Recently I had a need for a simple logfile viewer for use in some stuff we have planned at Freepository. But this log file viewer had a few requirements that made it unique: it had to get the log file contents from the server in small chunks, not tie up the browser (such as an old-style synchronous request would do), and refresh in the browser without reloading the page.

I thought I could easily find one that someone had already written, but Google was not my friend. I found nothing even close, so I wrote my own. Here it is.

Working example:  https://freepository.com/ajax-logtail-viewer/ajax-logtail-viewer.php

Open that page (↑) in a new window, follow the instructions and view the source.

[javascript gutter=”true” toolbar=”true”]

/* an ajax log file tailer / viewer

copyright 2007 john minnihan.

http://freepository.com

Released under these terms

  1. This script, associated functions and HTML code (“the code”) may be used by you (“the recipient”) for any purpose.

  2. This code may be modified in any way deemed useful by the recipient.

  3. This code may be used in derivative works of any kind, anywhere, by the recipient.

  4. Your use of the code indicates your acceptance of these terms.

  5. This notice must be kept intact with any use of the code to provide attribution.

*/

function getLog(timer) {

var url = “https://freepository.com/ajax-logtail-viewer/ajax-logtail.php";

request1.open(“GET”, url, true);

request1.onreadystatechange = updatePage;

request1.send(null);

startTail(timer);

}

function startTail(timer) {

if (timer == “stop”) {

stopTail();

} else {

t= setTimeout(“getLog()”,1000);

}

}

function stopTail() {

clearTimeout(t);

var pause = “The log viewer has been paused. To begin viewing again, click the Start Viewer button.n”;

logDiv = document.getElementById(“log”);

var newNode=document.createTextNode(pause);

logDiv.replaceChild(newNode,logDiv.childNodes[0]);

}

function updatePage() {

if (request1.readyState == 4) {

if (request1.status == 200) {

var currentLogValue = request1.responseText.split(“n”);

eval(currentLogValue);

logDiv = document.getElementById(“log”);

var logLine = ‘ ‘;

for (i=0; i < currentLogValue.length – 1; i++) {

logLine += currentLogValue[i] + “
n”;

}

logDiv.innerHTML=logLine;

} else

alert(“Error! Request status is ” + request1.status);

}

}

[/javascript]

This is implemented via a div named log, two buttons (Start & Stop) and of course the javascript files themselves. Here’s the HTML snippet:

[html]

This is the Log Viewer. To begin viewing the log live in this window, click Start Viewer. To stop the window refreshes, click Pause Viewer.

[/html]

For completeness, here is the source for ajax.js. I did not write this myself; I think it came from Brett McLaughlin.

[javascript]

function createRequest() {

var request = null;

try {

request = new XMLHttpRequest();

} catch (trymicrosoft) {

try {

request = new ActiveXObject(“Msxml2.XMLHTTP”);

} catch (othermicrosoft) {

try {

request = new ActiveXObject(“Microsoft.XMLHTTP”);

} catch (failed) {

request = null;

}

}

}

if (request == null) {

alert(“Error creating request object!”);

} else {

return request;

}

}

var request1 = createRequest();

[/javascript]

And here is the trivial PHP script (“logtail.php” in the example above) that is called asynchronously:

[php]<?

// logtail.php

$cmd = “tail -10 /path/to/your/logs/some.log”;

exec(“$cmd 2>&1”, $output);

foreach($output as $outputline) {

echo (“$outputlinen”);

}

?>[/php]

Comments are welcome, and though I hope this is useful to you… I don’t have time to support it, so debugging questions are likely to be ignored. 

Be sure to check out the working example here:

https://freepository.com/ajax-logtail-viewer/ajax-logtail-viewer.php

The obvious question may be

“How do I control the timer? Can I make it update more or less frequently?”

The answer is Yes. Simply adjust the value of the timer variable passed to the getLog() function from startTail() -a larger number makes the log viewer refresh less frequently. The value shown (1000) makes the div update about once per second.

I would have preferred to avoid use of innerHTML in the div refresh, but much to my dismay no other technique I tried worked. innerHTML worked flawlessly and immediately. Hrrumph.

Update from Fred in the comments:   “Your script don’t seem to work in IE. I tried the suggestions of using NO-CACHE but that was not the answer. Your working example also does not work in IE. The real answer seems to be in the logtail.js file. The GET needs to be changed to a POST and everything fell into place for both FF and IE for me.

Here’s the change:

request.open(“POST“, url, true);”

Tags: , , ,

Reblog this post [with Zemanta]