AJAX Logfile Tailer & Viewer
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
/* 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/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
![Reblog this post [with Zemanta]](http://img.zemanta.com/reblog_e.png?x-id=0330f7db-3224-44f7-9174-017e764af359)
Popularity: 88% [?]
-
Aaron
-
John Minnihan
-
Graziano
-
John Minnihan
-
John Minnihan
-
John Minnihan
-
jherazob
-
jherazob
-
jherazob
-
John Minnihan
-
John Minnihan
-
Lucas
-
Lucas
-
John Minnihan
-
Lucas
-
John Minnihan
-
Lucas
-
John Minnihan
-
John Minnihan
-
capcorne
-
John Minnihan
-
Chris
-
John Minnihan
-
John
-
John Minnihan
