bhelx/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <title>Websockets tail Server</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  <script src="/socket.io/socket.io.js"></script>
  <style type="text/css" rel="stylesheet">
    body{background-color:#222;}
    #info{ font-size: 32px; color:#000;text-shadow:#444 1px 1px 2px; text-align:right;margin:20px 10px;text-transform:lowercase;}
    #tail{ border: 1px solid #444; overflow-x:hidden; overflow-y:auto; background-color:#333; color: #EEE; text-shadow:#000 0 0 2px; height: 400px; padding: 10px; font-size:12px; line-height:20px;}
    .trebuchet{font-family: "Trebuchet MS","Lucida Sans Unicode","Lucida Grande","Lucida Sans",Arial,sans-serif;}
    .monospace{font-family: Monaco,"Bitstream Vera Sans Mono","Lucida Console",Terminal,monospace;}
    .selection::selection , .selection *::selection{background: #EEE;color:#000;border-color:#000; text-shadow:#fff 0 0 2px;}
    .selection::-moz-selection , .selection *::-moz-selection{background: #EEE;color:#000;border-color:#000; text-shadow:#fff 0 0 2px;}
  </style>
</head>
<body>
  <div id="info" class="trebuchet"></div>
  <div id="tail" class="monospace selection"></div>
  <script type="text/javascript">
  (function() {
    var lines = 0, notice = $("#info"), buffer = $('#tail');
    //var socket  = new io.Socket('localhost', {port: 8000});
    //socket.connect();
    var socket = io.connect("http://localhost:8000");
    socket.on('connect', function() {
      console.log('Connected to:', socket.host);
    });
    socket.on('message', function(message) {
      if (message.filename) {
        notice.html( 'watching ' + message.filename );
      }else if (message.tail) {
        buffer.append( message.tail.join('<br/>') );
        buffer.scrollTop(lines*100)
        lines = lines + message.tail.length;
      }else if(message.clear) {
        $('$tail').empty();
      }else console.log('Received message:', message);
    });
  })();
  </script>
</body>
</html>

## server.js
// ===================================
// `tail -f` in Node.js and WebSockets
// ===================================
var http    = require('http'),
    io      = require('socket.io'),
    fs      = require('fs');

var backlog_size = 2000;
var filename = process.argv[2];
if (!filename) return util.puts("Usage: node <server.js> <filename>");

// -- Node.js HTTP Server ----------------------------------------------------------
server = http.createServer(function(req, res){
  res.writeHead(200, {'Content-Type': 'text/html'})
  fs.readFile(__dirname + '/index.html', function(err, data){
  	res.write(data, 'utf8');
  	res.end();
  });
})
server.listen(8000, '0.0.0.0');

// -- Setup Socket.IO ---------------------------------------------------------
io = io.listen(server);
io.sockets.on('connection', function(client){
  client.send( { filename : filename } );
  console.log('connected');
  fs.stat(filename,function(err,stats){
    if (err) throw err;
    var start = (stats.size > backlog_size)?(stats.size - backlog_size):0;
    var stream = fs.createReadStream(filename,{start:start, end:stats.size});
    stream.addListener("data", function(lines){
      lines = lines.toString('utf-8');
      lines = lines.slice(lines.indexOf("\n")+1).split("\n");
      console.log(lines);
      client.emit('message', { tail : lines});
    });
  });
});

// watch the file now
fs.watchFile(filename, function(curr, prev) {
  if(prev.size > curr.size) return {clear:true};
  var stream = fs.createReadStream(filename, { start: prev.size, end: curr.size});
  stream.addListener("data", function(lines) {
    //console.log(lines.toString('utf-8'));
    io.sockets.emit('message', { tail : lines.toString('utf-8').split("\n") });
  });
});

console.log('Server running at http://0.0.0.0:8000/, connect with a browser to see tail output');
	<!DOCTYPE html>
	<html>
	<head>
	<title>Websockets tail Server</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
	<script src="/socket.io/socket.io.js"></script>
	<style type="text/css" rel="stylesheet">
	body{background-color:#222;}
	#info{ font-size: 32px; color:#000;text-shadow:#444 1px 1px 2px; text-align:right;margin:20px 10px;text-transform:lowercase;}
	#tail{ border: 1px solid #444; overflow-x:hidden; overflow-y:auto; background-color:#333; color: #EEE; text-shadow:#000 0 0 2px; height: 400px; padding: 10px; font-size:12px; line-height:20px;}
	.trebuchet{font-family: "Trebuchet MS","Lucida Sans Unicode","Lucida Grande","Lucida Sans",Arial,sans-serif;}
	.monospace{font-family: Monaco,"Bitstream Vera Sans Mono","Lucida Console",Terminal,monospace;}
	.selection::selection , .selection *::selection{background: #EEE;color:#000;border-color:#000; text-shadow:#fff 0 0 2px;}
	.selection::-moz-selection , .selection *::-moz-selection{background: #EEE;color:#000;border-color:#000; text-shadow:#fff 0 0 2px;}
	</style>
	</head>
	<body>
	<div id="info" class="trebuchet"></div>
	<div id="tail" class="monospace selection"></div>
	<script type="text/javascript">
	(function() {
	var lines = 0, notice = $("#info"), buffer = $('#tail');
	//var socket = new io.Socket('localhost', {port: 8000});
	//socket.connect();
	var socket = io.connect("http://localhost:8000");
	socket.on('connect', function() {
	console.log('Connected to:', socket.host);
	});
	socket.on('message', function(message) {
	if (message.filename) {
	notice.html( 'watching ' + message.filename );
	}else if (message.tail) {
	buffer.append( message.tail.join('<br/>') );
	buffer.scrollTop(lines*100)
	lines = lines + message.tail.length;
	}else if(message.clear) {
	$('$tail').empty();
	}else console.log('Received message:', message);
	});
	})();
	</script>
	</body>
	</html>
	// ===================================
	// `tail -f` in Node.js and WebSockets
	// ===================================
	var http = require('http'),
	io = require('socket.io'),
	fs = require('fs');

	var backlog_size = 2000;
	var filename = process.argv[2];
	if (!filename) return util.puts("Usage: node <server.js> <filename>");

	// -- Node.js HTTP Server ----------------------------------------------------------
	server = http.createServer(function(req, res){
	res.writeHead(200, {'Content-Type': 'text/html'})
	fs.readFile(__dirname + '/index.html', function(err, data){
	res.write(data, 'utf8');
	res.end();
	});
	})
	server.listen(8000, '0.0.0.0');

	// -- Setup Socket.IO ---------------------------------------------------------
	io = io.listen(server);
	io.sockets.on('connection', function(client){
	client.send( { filename : filename } );
	console.log('connected');
	fs.stat(filename,function(err,stats){
	if (err) throw err;
	var start = (stats.size > backlog_size)?(stats.size - backlog_size):0;
	var stream = fs.createReadStream(filename,{start:start, end:stats.size});
	stream.addListener("data", function(lines){
	lines = lines.toString('utf-8');
	lines = lines.slice(lines.indexOf("\n")+1).split("\n");
	console.log(lines);
	client.emit('message', { tail : lines});
	});
	});
	});

	// watch the file now
	fs.watchFile(filename, function(curr, prev) {
	if(prev.size > curr.size) return {clear:true};
	var stream = fs.createReadStream(filename, { start: prev.size, end: curr.size});
	stream.addListener("data", function(lines) {
	//console.log(lines.toString('utf-8'));
	io.sockets.emit('message', { tail : lines.toString('utf-8').split("\n") });
	});
	});

	console.log('Server running at http://0.0.0.0:8000/, connect with a browser to see tail output');