Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Going real time with Socket.io

20,356 views

Published on

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

Published in: Technology, Education

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

×