Skip to content

Instantly share code, notes, and snippets.

@netroy

netroy/00-INSTALL

Forked from karmi/.gitignore
Created March 12, 2011 21:30
Show Gist options
  • Save netroy/867575 to your computer and use it in GitHub Desktop.
Save netroy/867575 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
00-INSTALL
IMPORTANT: this is outdated, go to https://github.com/netroy/Lockets
"npm install socket-io" & you are ready to go
Raw
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(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>
Raw
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 ---------------------------------------------------------
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');
@yossiovadia
Copy link

Same here :(

@skrobul
Copy link

skrobul commented Feb 10, 2014

the structure of calls has changed some time ago, so broadcast is not available anymore. below is modified version that works for me. Please note that client-side javascript has to be changed as well:

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

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.emit('start', { 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});
    // initially stream the file
    stream.addListener("data", function(lines){
      lines = lines.toString('utf-8');
      lines = lines.slice(lines.indexOf("\n")+1).split("\n");
      client.emit('tail', { lines: lines })
    });
  });


  // watch the file and emit new event once new data arrives
  fs.watchFile(filename, function(curr, prev) {
    console.log("file changed");
    if(prev.size > curr.size) return {clear:true};
    var stream = fs.createReadStream(filename, { start: prev.size, end: curr.size});
    stream.on("data", function(lines) {
      client.emit('tail', { lines : 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');

changed exerpts

 <script type="text/javascript">
  (function() {
    var lines = 0, notice = $("#info"), buffer = $('#tail');
    var socket = io.connect('http://127.0.0.1:8000/');
    socket.on('connect', function() {
      console.log('Connected to stream');
    });


    socket.on('tail', function(msg) {
      console.log("Message:");
      console.dir(msg);
      buffer.append(msg.lines.join('<br/>'));
      buffer.scrollTop(lines*100);
      lines = lines + msg.lines.length;
    });

  })();
  </script>

@vsnaveen1
Copy link

Thanks for the wonderful explanation here, can you please tell me why is my watchfile is triggering even though there is no change in my file. is there some sought of auto refresh happening?

@vsnaveen1
Copy link

Like the concept of file listening, is there a kind of listening to any DB (mongodb for ex:), I would like to broadcast my data as and when changes occur in my db

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment