Skip to content

Instantly share code, notes, and snippets.

@bhelx

bhelx/index.html

Created Dec 15, 2011
Embed
What would you like to do?
"tail -f" a file node 0.6.5 pipe to socket.io,
<!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');
@killerfish

This comment has been minimized.

Copy link

@killerfish killerfish commented Feb 9, 2012

Cant seem to get this working, server starts fine, but no output on the browser. Help please.thanks.

@bhelx

This comment has been minimized.

Copy link
Owner Author

@bhelx bhelx commented Apr 14, 2012

@killerfish

This comment has been minimized.

Copy link

@killerfish killerfish commented Apr 22, 2012

ty for the reply, i had solved it earlier, any idea how i can support multiple unique clients on this? like users A,B and C each accessing a different file.Do i maybe need to put the function for fs.watchfile in a child process every time for a user? and how to make unique id's for each socket connection.

@bhelx

This comment has been minimized.

Copy link
Owner Author

@bhelx bhelx commented Apr 22, 2012

That shouldn't be too hard. I definitely don't think you would need child processes for that. You can watch as many files as you want in one process but keep in mind at some point it gets slow. I would think the best way is to create a watch for each file and attach the users to those events on the socket 'connection' event. There are a bunch of ways to do that.

I really made this just to stream one file. I thought of adding the ability to input multiple files or add a directory but that wasnt really needed for my purposes.

If you are interested in a more professional solution, I would check this out:

http://logio.org/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.