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.
/* logtail.js
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 = "http://your.system.yourdomain.com/logtail.php";
request.open("GET", url, true);
request.onreadystatechange = updatePage;
request.send(null);
startTail(timer);
}
function startTail(timer) {
if (timer == "stop") {
stopTail();
} else {
t= setTimeout("getLog()",4000);
}
}
function stopTail() {
clearTimeout(t);
var pause = "The log viewer has been paused. To begin viewing logs again, click the Start Viewer button.";
logDiv = document.getElementById("log");
var newNode=document.createTextNode(pause);
logDiv.replaceChild(newNode,logDiv.childNodes[0]);
}
function updatePage() {
if (request.readyState == 4) {
if (request.status == 200) {
var currentLogValue = request.responseText.split("\n");
eval(currentLogValue);
logDiv = document.getElementById("log");
var logLine = ' ';
for (i=0; i < currentLogValue.length - 1; i++) {
logLine += currentLogValue[i] + ‘<br/>\n’;
}
logDiv.innerHTML=logLine;
} else
alert(”Error! Request status is ” + request.status);
}
}
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>
<head>
...
<script type="text/javascript" src="js/ajax.js"> </script>
<script type="text/javascript" src="js/logtail.js"> </script>
...
</head>
<body>
...
<button onclick="getLog('start');">Start Log</button>
<button onclick="stopTail();">Stop Log</button>
...
<div id="log" style="border:solid 1px #dddddd; margin-left:25px; font-size:9px;
padding-left:5px; padding-right:10px; padding-top:10px; padding-bottom:20px;
margin-top:10px; margin-bottom:10px; width:90%; text-align:left;">
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.
</div>
<p>...</p>
</body>
</html>
For completeness, here is the source for ajax.js. I did not write this myself; I think it came from Brett McLaughlin.
/* ajax.js */
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!");
var request = createRequest();
And here is the trivial PHP script (”logtail.php” in the example above) that is called asynchronously:
<?
// logtail.php
$cmd = "tail -10 /path/to/your/logs/some.log";
exec("$cmd 2>&1", $output);
foreach($output as $outputline) {
echo ("$outputline\n");
}
?>
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.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 I have highlighted above. A larger number makes the log viewer refresh less frequently. The default (in red above) is about 4 seconds.
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.
Tags: ajax, logfile, tail log, log viewer
6 Comments
Thank you! This is something I too have been searching for and did not find (until I typed the right voodoo into google and found your page, at least).
A very useful thing to have. The only problem I had was that the content would not update as the browser would cache it forever, so you would only get the first tail and then it just redisplayed the cached content over and over. Maybe a silly way to fix it, but I changed the getLog function slightly to add a random and meaningless variable to the url and now everything works great. Is there a better way to avoid the caching?
hey Aaron,
Sorry for the delayed reply to your question.
The getLog function updates properly for me on Flock, Firefox & Camino on OSX. You may be seeing results of IE’s (assuming IE here) aggressive caching. There are two ways to avoid the caching isssue: first, create a truly random URL such that each time the GET is invoked, it will indeed be unique. This is in fact the technique you used.
The other is to use the NO-CACHE metatag on the page. I’ve used this elsewhere to prevent IE from caching a page, primarily to prevent it from being accessible in the history. This is discussed here:
http://support.microsoft.com/kb/q222064/
Note that to fully implement this technique, you must place a NO-CACHE rule both in the header and at the bottom of the html.
Hello
may I use this
var url = “logtail.php”;
instead of this
var url = “http://your.system.yourdomain.com/logtail.php”;
BTW for me it’s does not work , do you confirm that all the js files are shown above ?
Thank you!
Hey graziano,
Sure - you may edit the script any way you wish. Have fun with it.
What part isn’t working? Do you see any error messages?
There was a publishing error in the ajax Javascript.
The very last line:
var request = createRequest();
must be included - very sorry!
I have added a working example here:
https://freepository.com/ajax-logtail-viewer.php
Post a Comment