Talk given at NodeMTL #2

1. Going realtime with
Socket.IO
Christian Joudrey - @cjoudrey

2. The goal
• Create a web application to chat in realtime

3. The challenges
• We want persistent connection between client and server

4. The challenges
• We want persistent connection between client and server
o Easy! We've got HTML5 Websockets.

5. 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

6. 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.

7. 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

8. Oh :(

9. That's okay...
• We can use different transports:
o HTML5 WebSocket
o Flash Socket
o AJAX Long Polling
o Forever Iframe

10. That's a lot of ugly code. :(

11. “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.”

12. Getting started
• Socket.IO: http://socket.io
• Install Socket.IO using npm:
npm install socket.io
• Documentation: http://bit.ly/SocketIODocs

13. Your first server
# Using Express as http server
var app = require('express').createServer();
var io = require('socket.io').listen(app);
io.sockets.on('connection', function (socket) {
console.log('Someone connected!');
});
app.listen(8080);
- or -
# You can also use node's http module
var app = require('http').createServer(callback);
var io = require('socket.io').listen(app);
app.listen(8080);

14. 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>

15. 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>

16. 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);

17. 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>

18. 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);

19. Detecting disconnects
var 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);

20. Interesting links
• Source code of a working chat: http://bit.ly/nodechat1
• Socket.IO Docs: http://bit.ly/SocketIODocs

21. Demo! :)

22. Questions? :)