This article is dedicated to ways how to build AJAX log parser with JQuery and PHP in an easy way.
1. What we have
As in the one project I needed to show the user log file, not just a display, but follow changes. Some kind of Ajax - PHP - tail. In online mode, its output changes with ajax.
The project uses CodeIgniter but it does not matter.
The choice fell on the library for jQuery PeriodicalUpdater http://www.360innovate.co.uk/blog/2009/03/periodicalupdater-for-jquery/. Moreover jQuery already has been.
The log file has the format:
- 2009.11.12 09:55:42 - [LOGIN] User Admin Admin with ID=3 was login.
- 2009.11.12 10:48:02 - [DOWNL] User Admin Admin with ID=3 was download file. File->phpExcelReader.zip
- 2009.11.12 10:48:25 - [DOWNL] User Admin Admin with ID=3 was download file. File->phpExcelReader.zip
- 2009.11.12 12:09:47 - [LOGOT] User Admin Admin with ID=3 was logout.
- 2009.11.12 12:09:52 - [LOGIN] User Admin Admin with ID=3 was login.
- 2009.11.12 12:15:01 - [LOGOT] User Admin Admin with ID=3 was logout.
- 2009.11.12 12:15:06 - [LOGIN] User Admin Admin with ID=3 was login.
- 2009.11.15 17:35:52 - [LOGIN] User Admin Admin with ID=3 was login.
- 2009.11.16 08:58:52 - [LOGIN] User Admin Admin with ID=3 was login
When application works, it appends log file with new strings.
The idea was that we would not just send the whole file but only a new rows.
2. Client side solution ( javascript and JQuery )
HTML part:
<textarea name="log1" readonly="readonly" class="log1" id="log1">{$logdata}</textarea>
<script type="text/javascript">
jQuery(document).ready(function(){
$('#log1')[0].scrollTop = $('#log1')[0].scrollHeight;
$.PeriodicalUpdater({
url : 'index.php/admin/logs/update',
method: 'POST',
minTimeout: 5000,
sendData: {name: 'dimas'}
},
function(data){
$('#log1')[0].textContent = $('#log1')[0].textContent + data;
$('#log1')[0].scrollTop = $('#log1')[0].scrollHeight;
});
});
</script>
Of course do not forget to include javascript library jQuery and PeriodicalUpdater.
JavaScript part responsible for the follow-up (update) from url - index.php/admin/logs/ update. This action is only responsible for return difference (!)
The first data fall into the textarea at the first boot, and then just loaded updates coming as plain text.
3. Server side solution ( PHP )
The php part which does that:
class AdminManageLogs extends CommonAdminController {
function index()
{
$logdata = file_get_contents('./application/log/users.log');
$ts = end($this->_getTimestamps($logdata));
$this->session->set_userdata('admin_logs_update_ts', $ts);
$this->templater->assign('logdata', $logdata);
$this->templater->render('admin_logs_manage');
}
function update()
{
$logdata = file_get_contents('./application/log/users.log');
$userLastTs = $this->session->userdata('admin_logs_update_ts');
if (!$userLastTs) {
return;
}
$tss = $this->_getTimestamps($logdata);
$lastTs = end($tss);
foreach ($tss as $i=>$ts) {
if ($ts == $userLastTs) {
if (isset($tss[$i+1])) {
$nextTs = $tss[$i+1];
} else {
$nextTs = null;
}
break;
}
}
if($lastTs==null) {
echo '';
} else {
$this->session->set_userdata('admin_logs_update_ts', $nextTs);
echo substr($logdata, stripos($logdata, $nextTs));
}
}
private function _getTimestamps($raw_data)
{
$rows = preg_match_all('/([0-9]){4}\.([0-9]){2}\.([0-9]){2}\s([0-9]){2}:([0-9]){2}:([0-9]){2}/', $raw_data, $matches);
return $matches[0];
}
}
The log file that handles - ./Application/log/users.log.Function index() renders the page and makes the initial filling textarea via variable Smarty ($logdata).
Function update() is responsible for ajax requests and calculations of the difference.
Timestamp is taken from the log file, and stored in a session with codeigniter's functions $this->session->userdata('admin_logs_update_ts') and $this->session->set_userdata( 'admin_logs_update_ts', $nextTs).
Attention! If the timestamp in the log file is different from mine you will need to adjust the method _getTimestamps () Namely, the regular expression '/([0-9]){4}\.([0-9]){2}\.([0-9]){2}\s([0-9]){2}:([0-9]){2}:([0-9]){2}/' because it matchs the line type 2009.11.16 08:58:52
Now, you know how to follow log files on the server with javascript and PHP. With this compact solution you can do unix-like tail by the web tools.
Denis O, PHP Department,
Binary Studio
