• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Going real time with Socket.io

Going real time with Socket.io



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

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



Total Views
Views on SlideShare
Embed Views



12 Embeds 178

http://paper.li 94
http://x443.wordpress.com 38
http://lanyrd.com 18
http://a0.twimg.com 9
http://us-w1.rockmelt.com 5
http://aws.w3db.us 4
http://twitter.com 3
http://feeds.feedburner.com 2
http://dev.synchvideos.com 2
http://www.fisproject.jp 1
https://si0.twimg.com 1
https://twitter.com 1



Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment
  • 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 Going real time with Socket.io Presentation Transcript

  • going real time withSOCKET.IO zz Arnout Kazemier / @3rdEden
  • 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 ;)
  • 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 available on github.com
  • communitygoogle: 1662 groups membersirc: 50 / 60 users onlineserver: 2613 watchers, 276 forksclient: 1404 watchers, 123 forks
  • 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 = require(‘socket.io).listen(s); listening on the server
  • 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 received’); }); socket.on(‘disconnect’, function (){ console.log(‘client disconnected’); });}); listening on the server
  • <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
  • 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
  • messaging
  • 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
  • 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
  • socket.send(‘plain text message’);socket.json.send({ json:‘here’ });socket.on(‘message’, function (data) { // data is plain text, or our json}); message flag
  • // 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’); message flag
  • // broadcast to everyoneio.sockets.emit(‘event’);io.sockets.send(‘hello nodejsconf.it’); message flag
  • // 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
  • 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 handshake is accepted socket.io server
  • feature detection is used to find a working transport layersocket.io client socket.io server
  • 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 client established with the socket.io server server
  • 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-polling’ ]);}); upcoming release
  • /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 upcoming release
  • DEMO
  • http://socket.iohttp://github.com/learnboost/socket.ioirc.freenode.net #socket.io <3 thanks talk rate thingy: http://joind.in/3712