going real time withSOCKET.IO       zz             Arnout Kazemier / @3rdEden
who am I                       stalk me on                                      twittersocket.io team memberwinner node kn...
what is socket.io
persistent connectionbetween server & client
real time
cross browser
cross browser even IE 5.5 should work <3
magic
open sourcelearnboost/socket.io            - node.js serverlearnboost/socket.io-client   - javascript client             a...
communitygoogle: 1662 groups membersirc: 50 / 60 users onlineserver: 2613 watchers, 276 forksclient: 1404 watchers, 123 fo...
getting started
installing the server    npm install socket.io                            installation
installing the client  npm install socket.io-client                             installation
var http = require(‘http’);var s = http.createServer(function(q,r){  r.writeHead(200); r.end(‘sup’);});s.listen(80);var io...
var io = require(‘socket.io).listen(80);                      listening on the server
io.sockets.on(‘connection’, function (socket) {  socket.on(‘custom event’, function (data) {    socket.emit(‘custom event ...
<script src=”/socket.io/socket.io.js”></script><script>var socket = io.connect();socket.on(‘connect’, function () {  socke...
var io = require(‘socket.io’).listen(80);// express styled configurationio.configure(‘development’, function(){  io.set(‘l...
messaging
socket.emit(‘event’, ‘message’);socket.emit(`event`, { json:‘here’ });socket.on(‘event’, function (data) {   // data is pl...
socket.send(‘plain text message’);socket.json.send({ json:‘here’ });// send method triggers the message// eventsocket.on(‘...
socket.send(‘plain text message’);socket.json.send({ json:‘here’ });socket.on(‘message’, function (data) {   // data is pl...
// broadcasts a message to all socketssocket.broadcast.emit(‘event’);                             message flag
// no need to internally buffer this msgsocket.volatile.emit(‘event’);                             message flag
// broadcast, but only to people in this roomsocket.broadcast.to(‘room’).emit(‘event’);                               mess...
// broadcast to everyoneio.sockets.emit(‘event’);io.sockets.send(‘hello nodejsconf.it’);                                me...
// on the clientsocket.send(‘hello nodejsconf.it’, function(arg) {  console.log(‘message reached the server’);  console.lo...
what happens when   you connect
socket.io client   socket.io server
socket.io client   handshake request   socket.io server
accepted transports,                   connection id and config                         is returnedsocket.io client   hands...
feature detection is used to find a                        working transport layersocket.io client                         ...
available transportsWeb Socket
available transportsWeb SocketFlash Socket
available transportsWeb SocketFlash SocketHTML File
available transportsWeb SocketFlash SocketHTML FileXHR Polling
available transportsWeb SocketFlash SocketHTML FileXHR PollingJSONP Polling
real time connection issocket.io client    established with the     socket.io server                           server
heartbeats are send to                   ensure proper connection                    real time connection issocket.io clie...
DEMO
upcoming release
rewrite of static backend gzip support dynamic socket.io.js generation                         upcoming release
io.configure(function(){  io.enable(‘browser client minification’);  io.set(‘transports’, [      ‘websocket’    , ‘xhr-pol...
/socket.io/socket.io+xhr-polling.js/socket.io/socket.io+websocket+htmlfile.js                             upcoming release
release of the RedisStorescaling socket.io across multiple processesand servers by introducing 1/2 lines of code          ...
DEMO
Q          ATALK NERDY TO ME
http://socket.iohttp://github.com/learnboost/socket.ioirc.freenode.net #socket.io         <3 thanks    talk rate thingy: h...
Upcoming SlideShare
Loading in...5
×

Going real time with Socket.io

17,540

Published on

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

Published in: Technology, Education
1 Comment
30 Likes
Statistics
Notes
No Downloads
Views
Total Views
17,540
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
413
Comments
1
Likes
30
Embeds 0
No embeds

No notes for slide
  • OMG YOU SEE MY SUPER SECRET HIDDEN PRESENTER SLIDE NOTES *shame* ;D\n
  • so hi, i&amp;#x2019;m arnout kazemier i&amp;#x2019;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&amp;#x2019;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&apos;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&amp;#x2019;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&amp;#x2019;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&apos;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&apos;s connected through long polling and is in the middle of a request-response cycle), if he doesn&apos;t receive ALL the tweets related to bieber your application won&apos;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&apos;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&apos;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.

    ×