zz SOCKET.IO going real time with Arnout Kazemier

what is socket.io

persistent connection between server & client

real time

cross browser even IE 5.5 should work <3

magic

open source learnboost/socket.io learnboost/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

var socket = io.connect(); socket.on(‘connect’, function () { socket.emit(‘custom event’, ‘pewpew’); }); listening on the client

var io = require(‘socket.io’).listen(80); // express styled configuration io.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 // event socket.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 server handshake 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 server real time connection is established with the server

socket.io client socket.io server real time connection is established with the server heartbeats are send to ensure proper connection

DEMO

upcoming release

gzip support dynamic 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