Going realtime with Socket.IO

14,652 views

Published on

Talk given at NodeMTL #2

Published in: Technology, Education
1 Comment
12 Likes
Statistics
Notes
No Downloads
Views
Total views
14,652
On SlideShare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
235
Comments
1
Likes
12
Embeds 0
No embeds

No notes for slide

Going realtime with Socket.IO

  1. 1. Going realtime with Socket.IO Christian Joudrey - @cjoudrey
  2. 2. The goal• Create a web application to chat in realtime
  3. 3. The challenges• We want persistent connection between client and server
  4. 4. The challenges• We want persistent connection between client and server o Easy! Weve got HTML5 Websockets.
  5. 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. 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. 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. 8. Oh :(
  9. 9. Thats okay...• We can use different transports: o HTML5 WebSocket o Flash Socket o AJAX Long Polling o Forever Iframe
  10. 10. Thats a lot of ugly code. :(
  11. 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. 12. Getting started• Socket.IO: http://socket.io• Install Socket.IO using npm: npm install socket.io• Documentation: http://bit.ly/SocketIODocs
  13. 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. 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. 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. 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. 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. 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. 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. 20. Interesting links• Source code of a working chat: http://bit.ly/nodechat1• Socket.IO Docs: http://bit.ly/SocketIODocs
  21. 21. Demo! :)
  22. 22. Questions? :)

×