Going realtime with Socket.IO

Going realtime with Socket.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! Weve got HTML5 Websockets.

The challenges• We want persistent connection between client and server o Easy! Weve got HTML5 Websockets.• We want to detect client disconnection and timeouts

The challenges• We want persistent connection between client and server o Easy! Weve 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! Weve 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

Thats okay...• We can use different transports: o HTML5 WebSocket o Flash Socket o AJAX Long Polling o Forever Iframe

Thats a lot of ugly code. :(

“Socket.IO aims to make realtime appspossible in every browser and mobile device,blurring the differences between the differenttransport mechanisms. Its care-free realtime100% 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); - or -# You can also use nodes http modulevar app = require(http).createServer(callback);var io = require(socket.io).listen(app);app.listen(8080);

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 clientvar 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? :)

Going realtime with Socket.IO

by Christian Joudrey on Jun 28, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

1 Embed 1

Statistics

Going realtime with Socket.IO — Presentation Transcript