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.

1. going real time with
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. what is socket.io

4. persistent connection
between server & client

5. real time

6. cross browser

7. cross browser
even IE 5.5 should work <3

8. magic

9. open source
learnboost/socket.io - node.js server
learnboost/socket.io-client - javascript client
available on github.com

10. community
google: 1662 groups members
irc: 50 / 60 users online
server: 2613 watchers, 276 forks
client: 1404 watchers, 123 forks

11. getting started

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. messaging

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 a message to all sockets
socket.broadcast.emit(‘event’);
message flag

24. // no need to internally buffer this msg
socket.volatile.emit(‘event’);
message flag

25. // broadcast, but only to people in this room
socket.broadcast.to(‘room’).emit(‘event’);
message flag

26. // broadcast to everyone
io.sockets.emit(‘event’);
io.sockets.send(‘hello nodejsconf.it’);
message flag

27. // on the client
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 is used to find a
working transport layer
socket.io client socket.io server

33. available transports
Web Socket

34. available transports
Web Socket
Flash Socket

35. available transports
Web Socket
Flash Socket
HTML File

36. available transports
Web Socket
Flash Socket
HTML File
XHR Polling

37. available transports
Web Socket
Flash Socket
HTML File
XHR Polling
JSONP Polling

38. real time connection is
socket.io client established with the socket.io server
server

39. heartbeats are send to
ensure proper connection
real time connection is
socket.io client established with the socket.io server
server

40. DEMO

41. upcoming release

42. rewrite of static backend
gzip support
dynamic socket.io.js generation
upcoming release

43. io.configure(function(){
io.enable(‘browser client minification’);
io.set(‘transports’, [
‘websocket’
, ‘xhr-polling’
]);
});
upcoming release

44. /socket.io/socket.io+xhr-polling.js
/socket.io/socket.io+websocket+htmlfile.js
upcoming release

45. release of the RedisStore
scaling socket.io across multiple processes
and servers by introducing 1/2 lines of code
upcoming release

46. DEMO

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