1. The cross-browser, cross-device WebSocket

2. WebSocket
• Ideal transport for realtime web
applications
• TCP for the web
• Bi-directional full-duplex communication
• Firefox 4 (beta), Google Chrome 4, Safari 5
• Draft, evolving protocol under constant
revision/changes.
http://tools.ietf.org/html/draft-hixie-thewebsocketprotocol

3. WebSocket is simple
• Conceived with the idea of simplicity for
the client-side developer and the server
implementor.
• The Socket.IO Node.JS WebSocket server
is ~130 LOC
• Yes, you can implement a scalable HTTP 1.1
server with WebSocket support in 130
LOC in JavaScript.

4. WebSocket is simple
var a = new WebSocket(‘ws://localhost’);
a.onopen = function(){
alert(‘connected’);
}
a.onmessage = function(ev){
alert(ev.data);
}
a.onclose = function(){
alert(‘disconnected’);
}

5. WebSocket AJAX
var a = new WebSocket(‘ws://localhost/w’); var a = new XMLHttpRequest();
a.onopen = function(){ a.onreadystatechange = function(){
alert(‘connected’); if (this.readyState == 4){
a.send(‘hello there’); alert(this.responseText);
} }
a.onmessage = function(ev){ });
alert(ev.data); a.open(‘GET’, ‘/some/url’);
} a.send();
a.onclose = function(){
alert(‘disconnected’);
}

6. WebSocket AJAX
var a = new WebSocket(‘ws://localhost/w’); var a = new XMLHttpRequest();
a.onopen = function(){ a.onreadystatechange = function(){
alert(‘connected’); if (this.readyState == 4){
a.send(‘hello there’); alert(this.responseText);
} }
a.onmessage = function(ev){ });
alert(ev.data); a.open(‘GET’, ‘/some/url’);
} a.send();
a.onclose = function(){
alert(‘disconnected’);
}
• Connection stays open and messages are sent • Connection opens, headers are sent, response is
emitted, connection is closed.
bi-directionally.
• Sends raw data from one point to the other, • GET, POST, PUT, DELETE,PATCH HTTP
commands.
doesn’t know any commands
• Ideal for realtime interactions • Ideal for traditional interactions
• Limited browser support. • Limited browser support

7. How about cross browser support?
To illustrate, let’s look at how people are using
AJAX today

8. How about cross browser support?
jQuery
• API on top of XMLHTTPRequest
$.ajax({ • Solves the differences between browsers,
url: ‘/some/url’, (implements MSXML ActiveX object for IE6)
complete: function(data){
// do something and works on almost every user agent.
}
})
• Makes it even easier to write async requests
• Adds *new features* that the standard doesn’t
support (timeouts, caching, filters, etc)

9. How about cross browser support?
Socket.IO • API on top of WebSocket, Flash, Long Polling
AJAX, Multipart AJAX, Iframes, but looks just like
var a = new io.Socket(); WebSocket.
a.send(‘test’);
.on(‘connect’, function(){
alert(‘connected’);
• Solves the differences between browsers. Works
}) on IE5.5+, Safari 3+, Chrome, FF3+, Opera10,
.on(‘message’, function(msg){ iPhone, iPad, Android, WebOS.
alert(msg);
});
.on(‘disconnect’, function(){ • Adds new features. Disconnection support is
alert(‘disconnected’); more reliable than WebSocket. Message buffering.
});
• Easy to extend without altering any natives. 10kb
compressed.
• The jQuery of WebSocket

10. Socket.IO
• http://socket.io / http://github.com/learnboost/socket.io-node
• Multiple applications deployed to production
• ~1000 github followers (socket.io and socket.io-node)
• 4 of the 7 Node.JS 48-hour coding competition winners use socket.io.
• Rocketpack.fi used socket.io+node.js to build an infrastructure that scales
to 100.000 simultaneous connections for a multiplayer gaming platform
(with a Scala backend for message passing and a sticky load balancer)
• Swarmation.com handles an average of 100 persistent connections while
working on every browser.

11. New in 0.6
• Over 20 bugfixes.
• Bullet-proof disconnection support in the client
(eg: internet disconnection)
• Works behind all proxies
• Works for cross-domain connections
• Easier to deploy

12. What’s next?
• New APIs to ease the streaming of *many* subsequent
messages (making it easier to develop multiplayer games
for example)
• SSL support for all transports (wss and https)
• Distributed automated testing
• NodeStream, a layer on top of Socket.IO and the Express
node.js web framework for creating realtime web apps
with hardly any coding. Will be announced at JSConf.eu 10.

13. Questions?