Going realtime with Socket.IO

  • 12,516 views
Uploaded on

Talk given at NodeMTL #2

Talk given at NodeMTL #2

More in: Technology , Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
12,516
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
206
Comments
1
Likes
9

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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! Weve got HTML5 Websockets.
  • 5. The challenges• We want persistent connection between client and server o Easy! Weve got HTML5 Websockets.• We want to detect client disconnection and timeouts
  • 6. 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.
  • 7. 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
  • 8. Oh :(
  • 9. Thats okay...• We can use different transports: o HTML5 WebSocket o Flash Socket o AJAX Long Polling o Forever Iframe
  • 10. Thats a lot of ugly code. :(
  • 11. “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.”
  • 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 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);
  • 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 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);
  • 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 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);
  • 20. Interesting links• Source code of a working chat: http://bit.ly/nodechat1• Socket.IO Docs: http://bit.ly/SocketIODocs
  • 21. Demo! :)
  • 22. Questions? :)