zzzzSOCKET.IO

going real time with

Arnout Kazemier / @3rdEden

what is socket.io

persistent connection between server & client

real time

cross browser

even IE 5.5 should work <3

magic

open sourcelearnboost/socket.iolearnboost/socket.io-client

- node.js server - javascript client

available on github.com

getting started

npm install socket.io

installing the server

installation

npm install socket.io-client

installing the client

installation

var http = require(‘http’);

var s = http.createServer(function(q,r){ r.writeHead(200); r.end(‘sup’);});

s.listen(80);

var io = require(‘socket.io).listen(s);

listening on the server

var io = require(‘socket.io).listen(80);

listening on the server

io.sockets.on(‘connection’, function (socket) { socket.on(‘custom event’, function (data) { socket.emit(‘custom event received’); });

socket.on(‘disconnect’, function (){ console.log(‘client disconnected’); });});

listening on the server

<script src=”/socket.io/socket.io.js”></script><script>var socket = io.connect();socket.on(‘connect’, function () { socket.emit(‘custom event’, ‘pewpew’);});</script>

listening on the client

var io = require(‘socket.io’).listen(80);

// express styled configurationio.configure(‘development’, function(){ io.set(‘log level’, 3);});

io.configure(‘production’, function(){ io.set(‘log level’, 1);});

configuring

messaging

socket.emit(‘event’, ‘message’);socket.emit(`event`, { json:‘here’ });

sending events client & server

socket.on(‘event’, function (data) { // data is plain text, or our json});

socket.send(‘plain text message’);socket.json.send({ json:‘here’ });

sending messages client & server

// send method triggers the message// eventsocket.on(‘message’, function (data) { // data is plain text, or our json});

socket.send(‘plain text message’);socket.json.send({ json:‘here’ });

message flag

socket.on(‘message’, function (data) { // data is plain text, or our json});

socket.broadcast.emit(‘event’);

message flag

// broadcasts a message to all sockets

socket.volatile.emit(‘event’);

message flag

// no need to internally buffer this msg

socket.broadcast.to(‘room’).emit(‘event’);

message flag

// broadcast, but only to people in this room

io.sockets.emit(‘event’);io.sockets.send(‘hello nodejsconf.it’);

message flag

// broadcast to everyone

socket.send(‘hello nodejsconf.it’, function(arg) { console.log(‘message reached the server’); console.log(‘arg:’, arg); // ‘hello’});

socket.on(‘message’, function (msg, fn) { console.log(‘msg:’, msg); fn(‘hello’); // confirm the acknowledgement});

acknowledgements

// on the client

// on the server

what happens when you connect

socket.io client socket.io server

socket.io client socket.io serverhandshake request

socket.io client socket.io serverhandshake is accepted

accepted transports, connection id and config is returned

socket.io client socket.io server

feature detection is used to find a working transport layer

available transports

Web Socket

available transports

Web Socket

Flash Socket

available transports

Web Socket

Flash Socket

HTML File

available transports

Web Socket

Flash Socket

HTML File

XHR Polling

available transports

Web Socket

Flash Socket

HTML File

XHR Polling

JSONP Polling

socket.io client socket.io serverreal time connection is established with

the server

socket.io client socket.io serverreal time connection is established with

the server

heartbeats are send to ensure proper

connection

DEMO

upcoming release

gzip supportdynamic socket.io.js generation

rewrite of static backend

upcoming release

io.configure(function(){ io.enable(‘browser client minification’); io.set(‘transports’, [ ‘websocket’ , ‘xhr-polling’ ]);});

upcoming release

/socket.io/socket.io+xhr-polling.js

upcoming release

/socket.io/socket.io+websocket+htmlfile.js

scaling socket.io across multiple processes and servers by introducing 1/2 lines of code

release of the RedisStore

upcoming release

DEMO