This document introduces WebSockets and Server-Sent Events (SSE) as technologies for enabling real-time, two-way communication between clients and servers on the web. It describes how WebSockets allow for a full-duplex connection with low overhead, unlike traditional HTTP requests which are half-duplex. SSE provides a one-way mechanism for push notifications from server to client without polling. The document provides code examples for establishing WebSocket and SSE connections and handling events. It also reviews browser support for these technologies and includes a link to a demo chat application built with WebSockets.

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?