1. INTRODUCTION TO
WEBSOCKETS
jgourgoutis@linkedin.com
WebSockets are a new way to connect
clients and servers with efficient two-way
communication that allows us to build true
desktop-style web applications!

2. Legacy Web

3. HTTP Protocol
• High Overhead (request & response
headers, cookies, etc.)
• “Half-duplex” connection
(request/response)

4. Current Workarounds
• AJAX/XHR
– Content can update w/o full page refresh
– User-perceived low latency
– Faux real-time via polling/long-polling
• Comet
– No standard specification
– Very complex to implement

5. HTML5 WebSockets

6. WebSocket Advantages!
• Full-duplex, low overhead
• Direct connection between client & server
• Same ports as HTTP/HTTPS
• Based on Web Standards (W3C & IETF)
• Unlike XHR, it works cross-domain!

7. More Details
• “ws” and “wss” protocols
• Two-part “handshake”: HTTP upgrade to WS
in request header

8. WebSocket API
varws = new WebSocket(url);
ws.onopen = function (evt) { /* connection
open */ };
ws.onmessage= function (evt) { /* received
message */ console.dir(evt.data); };
ws.onclose= function(evt){ /* connection
closed */ };

9. WebSocket API (ctd)
// Send a message
ws.send(“Do you like the scary clowns?!?”);
// Close the connection
ws.close();

10. WebSockets Browser Support

11. Server Events

12. Not Like WebSockets!
• Not two-way, just push from server
• Uses plain-ol’ HTTP
• Different message transport mechanism
• Same-origin policy applies.

13. EventSource API
vares = new EventSource(url);
es.readyState property
0 = connecting,1 = open, 2 = closed
es.close() closes the connection

14. EventSource Events
es.onopen = function(evt){};
es.onmessage = function(evt){};
es.onerror = function(evt){};
es.addEventListener();
Data object: evt.data

15. Sending Messages
• MIME type = text/event-stream
• Plain-text format
• id: message; id defaults to “data” if not
specified
• New lines (n) are significant

16. EventSource Browser Support

17. SEXY
DEMO
TIME!

18. I built a web chat application using WebSocket and EventSource.
Oh, and some Node.js and Socket.io, too.
http://jgourgou-mn.linkedin.biz:8080/
SUPER-AWESOME WEBSOCKET
CHAT DEMO

19. Take-Aways
• Socket.io is to WebSockets as Jquery is to
DOM
• Socket.io documentation sucks.
• Web examples for Socket.io suck.
• Node.js is weirdly cool, and overwhelming in
a Java sort of way.

20. Resources/Further Reading
• http://www.slideshare.net/pmoskovi/building-living-
web-applications-with-html5-websockets
• http://howtonode.org/websockets-socketio
• https://github.com/LearnBoost/socket.io
• http://www.websocket.org/
• http://www.nczonline.net/blog/2010/10/19/introducti
on-to-server-sent-events/
• https://github.com/remy/eventsource-h5d
• http://www.html5rocks.com/en/tutorials/eventsourc
e/basics/
• http://html5doctor.com/server-sent-events/

21. Questions?