Going realtime withSocket.IO

Christian Joudrey - @cjoudrey

The goal

• Create a web application to chat in realtime

The challenges

• We want persistent connection between client and server

The challenges

• We want persistent connection between client and server

o Easy! We've got HTML5 Websockets.

The challenges

• We want persistent connection between client and server

o Easy! We've got HTML5 Websockets.

• We want to detect client disconnection and timeouts

The challenges

• We want persistent connection between client and server

o Easy! We've got HTML5 Websockets.

• We want to detect client disconnection and timeouts

o Easy! We can detect when a websocket closes.

The challenges

• We want persistent connection between client and server

o Easy! We've got HTML5 Websockets.

• We want to detect client disconnection and timeouts

o Easy! We can detect when a websocket closes.

• We want cross-browser support

Oh :(

That's okay...

• We can use different transports:

o HTML5 WebSocket

o Flash Socket

o AJAX Long Polling

o Forever Iframe

That's a lot of ugly code. :(

“Socket.IO aims to make realtime apps possible in every browser and mobile device, blurring the differences between the different transport mechanisms. It's care-free realtime 100% in JavaScript.”

Getting started

• Socket.IO: http://socket.io

• Install Socket.IO using npm:npm install socket.io

• Documentation: http://bit.ly/SocketIODocs

Your first server

# Using Express as http servervar app = require('express').createServer();var io = require('socket.io').listen(app);

io.sockets.on('connection', function (socket) { console.log('Someone connected!');});

app.listen(8080);

# You can also use node's http modulevar app = require('http').createServer(callback);var io = require('socket.io').listen(app);

app.listen(8080);

- or -

Client-side JS

<script src='/socket.io/socket.io.js'></script><script> var socket = io.connect(); socket.on('connect', function () { console.log('We are connected!'); });</script>

Sending a message to server

<script src='/socket.io/socket.io.js'></script><script> var socket = io.connect(); socket.on('connect', function () { console.log('We are connected!'); var name = prompt('What is your name?'); this.emit('set nickname', name); });</script>

Receiving a message from client

var app = require('express').createServer();var io = require('socket.io').listen(app);

io.sockets.on('connection', function (socket) { console.log('Someone connected!'); socket.on('set nickname', function (nickname) { socket.nickname = nickname; console.log(nickname + ' just connected!'); });});

app.listen(8080);

Message acknowledgement (client)

<script src='/socket.io/socket.io.js'></script><script> var socket = io.connect(); socket.on('connect', function () { console.log('We are connected!');

var name = prompt('What is your name?');

this.emit('set nickname', name, function (success) { console.log('The server got the message!');

if (!success) { console.log('Nickname in use!'); } }); });</script>

Message acknowledgement (server)var app = require('express').createServer();var io = require('socket.io').listen(app);

var users = [];

io.sockets.on('connection', function (socket) { socket.on('set nickname', function (nick, cb) { if (users.indexOf(nick) != -1) { return cb(false); }

socket.nickname = nick; users.push(nick); cb(true); });});

app.listen(8080);

Detecting disconnectsvar app = require('express').createServer();var io = require('socket.io').listen(app);

var users = [];

io.sockets.on('connection', function (socket) { // ... socket.on('disconnect', function () { var nickname = socket.nickname;

if (nickname) { socket.broadcast.emit('user part', nickname); users.splice(users.indexOf(nickname), 1); } });});

app.listen(8080);

Interesting links

• Source code of a working chat: http://bit.ly/nodechat1

• Socket.IO Docs: http://bit.ly/SocketIODocs

Demo! :)

Questions? :)