socket.io
 in 10 minutes
what it is?
• WebSocket-like API
• Multiple transport support (old user
  agents, mobile browsers, etc).
• Multiple sockets under the same
  connection (namespaces).
• Disconnection detection through
  heartbeats.
what it is?

• Reconnection support with buffering
  (ideal for mobile devices or bad
  networks)
• Lightweight protocol that sits on top of
  HTTP.
socket.io states

• disconnected
• disconnecting
• connected
• connecting
transport connection

• closed
• closing
• open
• opening
supported transports
• xhr-polling
• xhr-multipart
• htmlfile
• websocket
• flashsocket
• jsonp-polling
code

   var socket = io.listen(app);
var clients = {};

socket.on('connection', function(client) {
  var id = client.sessionId;

  clients[id] = client;

  client.on('disconnect', function(){
     delete clients[id]
  })
});
code
   $.each(config.logfile, function(index, log) {

  tail = spawn('tail', ['-n', '1', '-f', log])

  tail.stdout.on('data', function (data) {
     $.each(clients, function(index, client) {
       client.send(json({output: data.toString(), file: log}));
    });
  })

  tail.stderr.on('data', function (data) {
     $.each(clients, function(index, client) {
       client.send(json({output: data.toString(), file: log}));
    });
  })
});
code
   <script>
 var socket = new io.Socket(#{"'" + hostname + "'"});
 socket.connect();
 socket.on('message', function(data) {
   log = JSON.parse(data)
   if (log.file == $('#logfiles').val()){
     $('.logs').append(log.output);
   }
 });
</script>
our maptail fork
server logs
credits

• https://github.com/LearnBoost/
  socket.io-spec
• https://github.com/LearnBoost/
  Socket.IO-node-client
• https://github.com/stagas/maptail

Socket.io

  • 1.
  • 2.
    what it is? •WebSocket-like API • Multiple transport support (old user agents, mobile browsers, etc). • Multiple sockets under the same connection (namespaces). • Disconnection detection through heartbeats.
  • 3.
    what it is? •Reconnection support with buffering (ideal for mobile devices or bad networks) • Lightweight protocol that sits on top of HTTP.
  • 4.
    socket.io states • disconnected •disconnecting • connected • connecting
  • 5.
    transport connection • closed •closing • open • opening
  • 6.
    supported transports • xhr-polling •xhr-multipart • htmlfile • websocket • flashsocket • jsonp-polling
  • 7.
    code var socket = io.listen(app); var clients = {}; socket.on('connection', function(client) { var id = client.sessionId; clients[id] = client; client.on('disconnect', function(){ delete clients[id] }) });
  • 8.
    code $.each(config.logfile, function(index, log) { tail = spawn('tail', ['-n', '1', '-f', log]) tail.stdout.on('data', function (data) { $.each(clients, function(index, client) { client.send(json({output: data.toString(), file: log})); }); }) tail.stderr.on('data', function (data) { $.each(clients, function(index, client) { client.send(json({output: data.toString(), file: log})); }); }) });
  • 9.
    code <script> var socket = new io.Socket(#{"'" + hostname + "'"}); socket.connect(); socket.on('message', function(data) { log = JSON.parse(data) if (log.file == $('#logfiles').val()){ $('.logs').append(log.output); } }); </script>
  • 10.
  • 11.
  • 12.
    credits • https://github.com/LearnBoost/ socket.io-spec • https://github.com/LearnBoost/ Socket.IO-node-client • https://github.com/stagas/maptail

Editor's Notes