Going real time with Socket.io


Published on

The presentation that I gave at http://nodejsconf.it

Published in: Technology, Education
1 Comment
No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • so hi, i’m arnout kazemier i’m one of the socket.io team members. After becoming second solo in last years node knockout competition i finally managed to become first solo, overall and utility. I have been using node since the early days and i’m a all around performance / high availability geek.\n
  • \n
  • \n
  • 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.\n
  • cross browser, and cross platform compatible\n
  • Desktop\nInternet Explorer 5.5+, Safari 3+, Google Chrome 4+ ,Firefox 3+, Opera 10.61+\n\nMobile\niPhone Safari, iPod Safari, iPad Safari, Android WebKit, WebOs WebKit\n\n
  • \n
  • \n
  • Big projects are using it, like Cloud 9 ide\n
  • \n
  • \n
  • for connecting with a socket.io server out of node, this is actually also the client side code. but i’m not going to dive to deep in this.\n
  • once you got socket.io installed all that is left to do is have it listen to a HTTP server.\n
  • if you don’t have one, you can also supply it with number and we will generate one for you.\n
  • Now that we have attached socket.io on a server we can start listening for events. \n
  • The /socket.io/socket.io.js file is served by socket.io automatically. We ship a compatible client with the server so you are sure that your client side code is compatible with your socket.io server. But you can always just host the file your self\n
  • \n
  • \n
  • Follows the node.js EventEmitter pattern\n
  • These are used for lower level messaging. No fancy pancy abstractions on top of it\n
  • Message flags are used to reduce messaging complexity but still give you great control over the process.\nThe .json flag is available both on the server and on the client\n
  • To broadcast, simply add a broadcast flag to emit and send method calls. Broadcasting means sending a message to everyone else except for the socket that starts it.\n
  • Sometimes certain messages can be dropped. Let's say you have an app that shows realtime tweets for the keyword bieber.\nIf a certain client is not ready to receive messages (because of network slowness or other issues, or because he's connected through long polling and is in the middle of a request-response cycle), if he doesn't receive ALL the tweets related to bieber your application won't suffer.\nIn that case, you might want to send those messages as volatile messages.\n\n
  • Sometimes you want to put certain sockets in the same room, so that it's easy to broadcast to all of them together.\nThink of this as built-in channels for sockets. Sockets join and leave rooms in each socket.\n\n
  • But sometimes you just want to broadcast to all connected clients, so instead of emitting to the socket object you call the emit function on io.sockets\n\n
  • Sometimes you just want to be sure that a message reached the server\nSometimes, you might want to get a callback when the client confirmed the message reception.\nTo do this, simply pass a function as the last parameter of .send or .emit. What's more, when you use .emit, the acknowledgement is done by you, which means you can also pass data along:\n\n\n
  • \n
  • \n
  • We start off with a handshake request, this allows the server to authenticate the connecting client, accepting or declining the connection. During this step we also store a snapshot of the headers and ip address.\n
  • Once the handshake is accepted we return a connection id, accepted transports and some configuration options such the close timeout.\n
  • after the handshake we start searching a available transport layer using feature detection\n
  • Supported drafts: draft 76 and hybi 07-12\nBrowser supports: iOS, Safari 5, FireFox 6, Opera, Chrome.\n
  • Requires Flash 10+ and a policy file server (we ship this) has a slow start up time but it does bidirectional communication. This transport is disabled by default on the server because of the slow upstart time.\n
  • A IE only transport, it makes use of the ActiveX HTMLFile to create a forever loading iframe. The HTML allows this to work without showing any loading indicators.\n
  • A IE only transport, it makes use of the ActiveX HTMLFile to create a forever loading iframe. The HTML allows this to work without showing any loading indicators.\n
  • If everything else fails we can just use JSONP polling\n
  • \n
  • \n
  • The hello world of a real time app, a chat box\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • preview of the RedisStore\n
  • \n
  • \n
  • Going real time with Socket.io

    1. 1. going real time withSOCKET.IO zz Arnout Kazemier / @3rdEden
    2. 2. who am I stalk me on twittersocket.io team memberwinner node knockout 2011early noder since 0.1.3 @3rdEdenall around performance / highavailability & scalability geek.does not like coffeescript ;)
    3. 3. what is socket.io
    4. 4. persistent connectionbetween server & client
    5. 5. real time
    6. 6. cross browser
    7. 7. cross browser even IE 5.5 should work <3
    8. 8. magic
    9. 9. open sourcelearnboost/socket.io - node.js serverlearnboost/socket.io-client - javascript client available on github.com
    10. 10. communitygoogle: 1662 groups membersirc: 50 / 60 users onlineserver: 2613 watchers, 276 forksclient: 1404 watchers, 123 forks
    11. 11. getting started
    12. 12. installing the server npm install socket.io installation
    13. 13. installing the client npm install socket.io-client installation
    14. 14. var http = require(‘http’);var s = http.createServer(function(q,r){ r.writeHead(200); r.end(‘sup’);});s.listen(80);var io = require(‘socket.io).listen(s); listening on the server
    15. 15. var io = require(‘socket.io).listen(80); listening on the server
    16. 16. io.sockets.on(‘connection’, function (socket) { socket.on(‘custom event’, function (data) { socket.emit(‘custom event received’); }); socket.on(‘disconnect’, function (){ console.log(‘client disconnected’); });}); listening on the server
    17. 17. <script src=”/socket.io/socket.io.js”></script><script>var socket = io.connect();socket.on(‘connect’, function () { socket.emit(‘custom event’, ‘pewpew’);});</script> listening on the client
    18. 18. var io = require(‘socket.io’).listen(80);// express styled configurationio.configure(‘development’, function(){ io.set(‘log level’, 3);});io.configure(‘production’, function(){ io.set(‘log level’, 1);}); configuring
    19. 19. messaging
    20. 20. socket.emit(‘event’, ‘message’);socket.emit(`event`, { json:‘here’ });socket.on(‘event’, function (data) { // data is plain text, or our json}); sending events client & server
    21. 21. socket.send(‘plain text message’);socket.json.send({ json:‘here’ });// send method triggers the message// eventsocket.on(‘message’, function (data) { // data is plain text, or our json}); sending messages client & server
    22. 22. socket.send(‘plain text message’);socket.json.send({ json:‘here’ });socket.on(‘message’, function (data) { // data is plain text, or our json}); message flag
    23. 23. // broadcasts a message to all socketssocket.broadcast.emit(‘event’); message flag
    24. 24. // no need to internally buffer this msgsocket.volatile.emit(‘event’); message flag
    25. 25. // broadcast, but only to people in this roomsocket.broadcast.to(‘room’).emit(‘event’); message flag
    26. 26. // broadcast to everyoneio.sockets.emit(‘event’);io.sockets.send(‘hello nodejsconf.it’); message flag
    27. 27. // on the clientsocket.send(‘hello nodejsconf.it’, function(arg) { console.log(‘message reached the server’); console.log(‘arg:’, arg); // ‘hello’});// on the serversocket.on(‘message’, function (msg, fn) { console.log(‘msg:’, msg); fn(‘hello’); // confirm the acknowledgement}); acknowledgements
    28. 28. what happens when you connect
    29. 29. socket.io client socket.io server
    30. 30. socket.io client handshake request socket.io server
    31. 31. accepted transports, connection id and config is returnedsocket.io client handshake is accepted socket.io server
    32. 32. feature detection is used to find a working transport layersocket.io client socket.io server
    33. 33. available transportsWeb Socket
    34. 34. available transportsWeb SocketFlash Socket
    35. 35. available transportsWeb SocketFlash SocketHTML File
    36. 36. available transportsWeb SocketFlash SocketHTML FileXHR Polling
    37. 37. available transportsWeb SocketFlash SocketHTML FileXHR PollingJSONP Polling
    38. 38. real time connection issocket.io client established with the socket.io server server
    39. 39. heartbeats are send to ensure proper connection real time connection issocket.io client established with the socket.io server server
    40. 40. DEMO
    41. 41. upcoming release
    42. 42. rewrite of static backend gzip support dynamic socket.io.js generation upcoming release
    43. 43. io.configure(function(){ io.enable(‘browser client minification’); io.set(‘transports’, [ ‘websocket’ , ‘xhr-polling’ ]);}); upcoming release
    44. 44. /socket.io/socket.io+xhr-polling.js/socket.io/socket.io+websocket+htmlfile.js upcoming release
    45. 45. release of the RedisStorescaling socket.io across multiple processesand servers by introducing 1/2 lines of code upcoming release
    46. 46. DEMO
    47. 47. Q ATALK NERDY TO ME
    48. 48. http://socket.iohttp://github.com/learnboost/socket.ioirc.freenode.net #socket.io <3 thanks talk rate thingy: http://joind.in/3712
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.