2014年3月16日日曜日

JavaScript: サーバ上のログファイルを定期的に取得

PHP で時間が掛かる処理をやっている時に、どこまで進んでいるのかを調べる場合にはコンソールに進捗を表示すればよいが、Web ブラウザ上に表示したい場合もある。

リアルタイムに表示したい場合は ob_flush() などを使用して echo した文字列を定期的に出せばよいが、ログファイルに処理内容を出力して、それを画面に表示する方法もある。

例えばログファイルの末尾を表示するだけの PHP を作成する。
  1 <?php
  2 
  3 system('tail -n 100 log', $log);
  4 echo $log;

そして Web ブラウザから JavaScript でこのスクリプトをポーリングする。
JavaScript
  1 $(function() {
  2     var update = function() {
  3         $.ajax('check_log.php', {
  4             dataType: 'text',
  5             success: function(data) {
  6                 $('#log').html(data.replace(/\n/g, '<br>'));
  7 
  8                 if($('input').prop('checked')) {
  9                     window.scrollTo(0, $('html').height());
 10                 }
 11             },
 12             error: function() {
 13                 console.log('error');
 14             }
 15         });
 16     };
 17 
 18     var counter = 10;
 19     setInterval(function() {
 20         counter = counter - 1;
 21         $('#counter').html('ログの更新まで ' + counter + '...');
 22 
 23         if(counter == 0) {
 24             counter = 10;
 25             update();
 26         }
 27     }, 1000);
 28 
 29     update();
 30 });

HTML
  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="utf-8">
  5         <title>ログ</title>
  6         <link rel="stylesheet" href="css/crawl.css">
  7         <!--[if lt IE 9]>
  8             <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
  9         <![endif]-->
 10         <!--[if gte IE 9]><!-->
 11             <script src="//code.jquery.com/jquery-2.1.0.min.js"></script>
 12         <!--<![endif]-->
 13         <script src="js/crawl.js"></script>
 14     </head>
 15     <body>
 16         <div id="log"></div>
 17         <div>
 18             <label><input type="checkbox"> 自動的にスクロールする</label>
 19         </div>
 20         <div id="counter">ログの更新まで 10...</div>
 21     </body>
 22 </html>

0 件のコメント:

コメントを投稿