Downloaded 501 times
![io.configure(function(){
io.enable(‘browser client minification’);
io.set(‘transports’, [
‘websocket’
, ‘xhr-polling’
]);
});
upcoming release](https://image.slidesharecdn.com/goingrealtime-110927043114-phpapp02/75/Going-real-time-with-Socket-io-43-2048.jpg)
Uploaded byArnout Kazemier
Going real time with Socket.io
This document provides an overview of Socket.IO, a JavaScript library for real-time web applications. It discusses what Socket.IO is, how it provides persistent connections and real-time functionality across browsers including older versions of Internet Explorer. It also summarizes how to install and use Socket.IO on both the client-side and server-side as well as how to send and receive events. Key features like broadcasting messages, acknowledgements, and configurations are also highlighted. Upcoming releases like optimizations, gzip support, and integration with Redis for scaling are mentioned as well.
More Related Content
Similar to Going real time with Socket.io
Going real time with Socket.io
- 1. going real timewith SOCKET.IO zz Arnout Kazemier / @3rdEden
- 2. who am I stalk me on twitter socket.io team member winner node knockout 2011 early noder since 0.1.3 @3rdEden all around performance / high availability & scalability geek. does not like coffeescript ;)
- 3.
- 4.
- 5.
- 6.
- 7. cross browser evenIE 5.5 should work <3
- 8.
- 9. open source learnboost/socket.io - node.js server learnboost/socket.io-client - javascript client available on github.com
- 10. community google: 1662 groupsmembers irc: 50 / 60 users online server: 2613 watchers, 276 forks client: 1404 watchers, 123 forks
- 11.
- 12. installing the server npm install socket.io installation
- 13. installing the client npm install socket.io-client installation
- 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. var io =require(‘socket.io).listen(80); listening on the server
- 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. <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. var io =require(‘socket.io’).listen(80); // express styled configuration io.configure(‘development’, function(){ io.set(‘log level’, 3); }); io.configure(‘production’, function(){ io.set(‘log level’, 1); }); configuring
- 19.
- 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. socket.send(‘plain text message’); socket.json.send({json:‘here’ }); // send method triggers the message // event socket.on(‘message’, function (data) { // data is plain text, or our json }); sending messages client & server
- 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. // broadcasts amessage to all sockets socket.broadcast.emit(‘event’); message flag
- 24. // no needto internally buffer this msg socket.volatile.emit(‘event’); message flag
- 25. // broadcast, butonly to people in this room socket.broadcast.to(‘room’).emit(‘event’); message flag
- 26. // broadcast toeveryone io.sockets.emit(‘event’); io.sockets.send(‘hello nodejsconf.it’); message flag
- 27. // on theclient socket.send(‘hello nodejsconf.it’, function(arg) { console.log(‘message reached the server’); console.log(‘arg:’, arg); // ‘hello’ }); // on the server socket.on(‘message’, function (msg, fn) { console.log(‘msg:’, msg); fn(‘hello’); // confirm the acknowledgement }); acknowledgements
- 28. what happens when you connect
- 29. socket.io client socket.io server
- 30. socket.io client handshake request socket.io server
- 31. accepted transports, connection id and config is returned socket.io client handshake is accepted socket.io server
- 32. feature detection isused to find a working transport layer socket.io client socket.io server
- 33.
- 34.
- 35. available transports Web Socket FlashSocket HTML File
- 36. available transports Web Socket FlashSocket HTML File XHR Polling
- 37. available transports Web Socket FlashSocket HTML File XHR Polling JSONP Polling
- 38. real time connectionis socket.io client established with the socket.io server server
- 39. heartbeats are sendto ensure proper connection real time connection is socket.io client established with the socket.io server server
- 40.
- 41.
- 42. rewrite of staticbackend gzip support dynamic socket.io.js generation upcoming release
- 43. io.configure(function(){ io.enable(‘browserclient minification’); io.set(‘transports’, [ ‘websocket’ , ‘xhr-polling’ ]); }); upcoming release
- 44.
- 45. release of theRedisStore scaling socket.io across multiple processes and servers by introducing 1/2 lines of code upcoming release
- 46.
- 47. Q A TALK NERDY TO ME
- 48. http://socket.io http://github.com/learnboost/socket.io irc.freenode.net #socket.io <3 thanks talk rate thingy: http://joind.in/3712
Editor's Notes
- #2 OMG YOU SEE MY SUPER SECRET HIDDEN PRESENTER SLIDE NOTES *shame* ;D\n
- #3 so hi, i&#x2019;m arnout kazemier i&#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&#x2019;m a all around performance / high availability geek.\n
- #4 \n
- #5 \n
- #6 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
- #7 cross browser, and cross platform compatible\n
- #8 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
- #9 \n
- #10 \n
- #11 Big projects are using it, like Cloud 9 ide\n
- #12 \n
- #13 \n
- #14 for connecting with a socket.io server out of node, this is actually also the client side code. but i&#x2019;m not going to dive to deep in this.\n
- #15 once you got socket.io installed all that is left to do is have it listen to a HTTP server.\n
- #16 if you don&#x2019;t have one, you can also supply it with number and we will generate one for you.\n
- #17 Now that we have attached socket.io on a server we can start listening for events. \n
- #18 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
- #19 \n
- #20 \n
- #21 Follows the node.js EventEmitter pattern\n
- #22 These are used for lower level messaging. No fancy pancy abstractions on top of it\n
- #23 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
- #24 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
- #25 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
- #26 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
- #27 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
- #28 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
- #29 \n
- #30 \n
- #31 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
- #32 Once the handshake is accepted we return a connection id, accepted transports and some configuration options such the close timeout.\n
- #33 after the handshake we start searching a available transport layer using feature detection\n
- #34 Supported drafts: draft 76 and hybi 07-12\nBrowser supports: iOS, Safari 5, FireFox 6, Opera, Chrome.\n
- #35 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
- #36 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
- #37 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
- #38 If everything else fails we can just use JSONP polling\n
- #39 \n
- #40 \n
- #41 The hello world of a real time app, a chat box\n
- #42 \n
- #43 \n
- #44 \n
- #45 \n
- #46 \n
- #47 preview of the RedisStore\n
- #48 \n
- #49 \n