Skip to content

Instantly share code, notes, and snippets.

@emerleite
Forked from netroy/00-INSTALL
Created April 23, 2011 13:38
Show Gist options
  • Save emerleite/938617 to your computer and use it in GitHub Desktop.
Save emerleite/938617 to your computer and use it in GitHub Desktop.
<!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(null, {port: 8000});
socket.connect();
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>
"npm install socket-io" & you are ready to go
// ===================================
// `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 ---------------------------------------------------------
var socket = io.listen(server);
socket.on('connection', function(client){
client.send( { filename : filename } );
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");
client.send({ 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) {
socket.broadcast({ 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');
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment