🥦 🔥 🥪 Node.jsおよびWebSocket上のブラウザーでのログの動的表示 🍓 🧘🏽 👏

Node.jsおよびWebSocket上のブラウザーでのログの動的表示

特定のフォルダ内の新しいファイルの出現を動的に監視し、ブラウザウィンドウにログファイルの内容を表示する必要がある場合があります。この単純化された例で、これがどのように行われるかを示したいと思います。

ソリューションのツールとモジュール

サーバー側にNode.jsが選択されました。しかし、同様の例は、ルーブルでEMを使用して同様に実装できます。この場合、 Socket.IOライブラリーと、ファイルを操作するためのいくつかの単純なモジュールが買収されました。

node.jsのファイルツリーを監視するためのユーティリティ -意味は、指定されたフォルダー内のファイルの外観、削除、および変更を追跡することです。

common.NODES_PATH内のファイルの出現/削除を追跡し、これらのイベントに関するメッセージを送信する例。

watch.createMonitor(common.NODES_PATH, function (monitor) { monitor.on("created", function (f, stat) { var file_name = common.removeRoot(f); console.log(file_name + ' created'); var idx = log_files.indexOf(file_name); if (idx < 0) { log_files.push(file_name); io.sockets.emit('log_files_add', [file_name]); watchFile(file_name); } }) monitor.on("removed", function (f, stat) { var file_name = common.removeRoot(f); console.log(file_name + ' removed'); var idx = log_files.indexOf(file_name); if (idx >= 0) { log_files.splice(idx, 1); io.sockets.emit('log_files_remove', [file_name]); unwatchFile(file_name); } }) })

nodejsディレクトリウォーカーは、指定されたフォルダーの内部をウォークスルーし、特定のファイルタイプを見つけるイベントを受け取ることができるパッケージです。または、単純化されている場合は、再帰的にすべてのサブフォルダーを調べて、そこにあるものを確認します。（下の例）

Jade-テンプレートエンジン -簡素化されたUIをすばやく概説し、アイデアをテストします。

実装例

特定のポートにWebサーバーを作成します。

サーバーに初めて接続するとき、Walkerを使用してフォルダーを調べ、既存のファイルに関する情報の最初の部分（および拡張子によるフィルター）と最後の20行を送信します。

 io.sockets.on('connection', function(socket) { var walk = require('walk'); // receive list of log files var walker = walk.walk(common.NODES_PATH, { followLinks: false }); walker.on('file', function(root, stat, next) { if(/log$/.test(stat.name)) { var file_name = common.removeRoot(root + '/' + stat.name); var idx = log_files.indexOf(file_name); if (idx < 0) { log_files.push(file_name); // send initial data portion var tail = spawn('tail', ['-n', 20].concat(common.NODES_PATH + '/' + file_name)); tail.stdout.on('data', function(data) { console.log('emit starting ' + file_name + ':lines' + ' with ' + data.toString('utf-8')); io.sockets.emit(file_name + ':lines', data.toString('utf-8').split('\n')); }); watchFile(file_name); } } next(); }); walker.on('end', function() { socket.emit('log_files_add', log_files); }); })

watchを使用して、新しいファイルまたは削除の外観を監視するモニターを作成します。（ファイルを削除すると、指定されたログを表示するブロックはそれに応じて削除されます）

 function watchFile(file) { console.log('start watching: ' + file); var tail = spawn('tail', ['-f'].concat(common.NODES_PATH + '/' + file)); watching_processes[file] = tail; tail.stdout.on('data', function(data) { console.log('emit ' + file + ':lines' + ' with ' + data.toString('utf-8')); io.sockets.emit(file + ':lines', data.toString('utf-8').split('\n')); }) } function unwatchFile(file) { console.log('end watching: ' + file); var process = watching_processes[file]; process.kill(); watching_processes[file] = null; }

打ち上げ

common.jsで、監視するフォルダーを設定する

var NODES_PATH = pathResolver.resolve(__dirname + '/../nodes');

* .logがフォルダーとサブフォルダー内に表示されると、ブラウザーウィンドウに表示されます。

パッケージをインストールnpm install

ためのnpm install

[~/Projects/autotest_node] git:master $ mkdir nodes 
      

        
        
        
      

     [~/Projects/autotest_node] git:master $ mkdir nodes/test1 
      

        
        
        
      

     [~/Projects/autotest_node] git:master $ mkdir nodes/test2 
      

        
        
        
      

     [~/Projects/autotest_node] git:master $ echo "test_message1" >> nodes/test1/first.log 
      

        
        
        
      

     [~/Projects/autotest_node] git:master $ echo "test_message1" >> nodes/test2/first.log 
      

        
        
        
      

     [~/Projects/autotest_node] git:master $ echo "test_message2" >> nodes/test2/first.log 
      

        
        
        
      

     [~/Projects/autotest_node] git:master $ echo "test_message2" >> nodes/test1/first.log

npm start

はサーバーを起動します

ソースコード

https://github.com/catz/autotest_node

おわりに

この例は、たとえば、自動テストケースの結果を共有し、他の人にその実行結果を追跡する機会を与える場合に役立ちます。そのようなタスクのためのより高度なツールがありますが、ブラウザで単純なtail -fを作成したい場合は、同様の例がうまくいくかもしれません。

Node.jsおよびWebSocket上のブラウザーでのログの動的表示

Node.jsおよびWebSocket上のブラウザーでのログの動的表示

ソリューションのツールとモジュール

実装例

打ち上げ

ソースコード

おわりに

More articles: