INTRODUCTION TO       WEBSOCKETS           jgourgoutis@linkedin.com   WebSockets are a new way to connect clients and serv...
Legacy Web
HTTP Protocol• High Overhead (request & response  headers, cookies, etc.)• “Half-duplex” connection  (request/response)
Current Workarounds• AJAX/XHR  – Content can update w/o full page refresh  – User-perceived low latency  – Faux real-time ...
HTML5 WebSockets
WebSocket Advantages!•   Full-duplex, low overhead•   Direct connection between client & server•   Same ports as HTTP/HTTP...
More Details• “ws” and “wss” protocols• Two-part “handshake”: HTTP upgrade to WS  in request header
WebSocket APIvarws = new WebSocket(url);ws.onopen = function (evt) { /* connection  open */ };ws.onmessage= function (evt)...
WebSocket API (ctd)// Send a messagews.send(“Do you like the scary clowns?!?”);// Close the connectionws.close();
WebSockets Browser Support
Server Events
Not Like WebSockets!•   Not two-way, just push from server•   Uses plain-ol’ HTTP•   Different message transport mechanism...
EventSource APIvares = new EventSource(url);es.readyState property0 = connecting,1 = open, 2 = closedes.close() closes the...
EventSource Eventses.onopen = function(evt){};es.onmessage = function(evt){};es.onerror = function(evt){};es.addEventListe...
Sending Messages• MIME type = text/event-stream• Plain-text format• id: message; id defaults to “data” if not  specified• ...
EventSource Browser Support
SEXYDEMOTIME!
I built a web chat application using WebSocket and EventSource.Oh, and some Node.js and Socket.io, too.http://jgourgou-mn....
Take-Aways• Socket.io is to WebSockets as Jquery is to  DOM• Socket.io documentation sucks.• Web examples for Socket.io su...
Resources/Further Reading• http://www.slideshare.net/pmoskovi/building-living-  web-applications-with-html5-websockets• ht...
Questions?
Upcoming SlideShare
Loading in...5
×

Intro to Web Sockets

1,192

Published on

Published in: Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,192
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
55
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • “Building Living Web Applications with HTML5 Websockets” presentation from Peter Moskovits @Kaazing
  • “Half-duplex” is analogous to picking up a phone, dialing a number, waiting for the other end to pick up, asking a question, getting a response, hanging up, and then repeating for the next question – instead of having a fluid, 10-minute conversation.
  • A type-ahead widget sending the letter “a” back to the server via XHR incurs a cost of 788  bytes  in the header for the 1  byte of the character
  • Intro to Web Sockets

    1. 1. INTRODUCTION TO WEBSOCKETS jgourgoutis@linkedin.com WebSockets are a new way to connect clients and servers with efficient two-waycommunication that allows us to build true desktop-style web applications!
    2. 2. Legacy Web
    3. 3. HTTP Protocol• High Overhead (request & response headers, cookies, etc.)• “Half-duplex” connection (request/response)
    4. 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. 5. HTML5 WebSockets
    6. 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. 7. More Details• “ws” and “wss” protocols• Two-part “handshake”: HTTP upgrade to WS in request header
    8. 8. WebSocket APIvarws = 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. 9. WebSocket API (ctd)// Send a messagews.send(“Do you like the scary clowns?!?”);// Close the connectionws.close();
    10. 10. WebSockets Browser Support
    11. 11. Server Events
    12. 12. Not Like WebSockets!• Not two-way, just push from server• Uses plain-ol’ HTTP• Different message transport mechanism• Same-origin policy applies.
    13. 13. EventSource APIvares = new EventSource(url);es.readyState property0 = connecting,1 = open, 2 = closedes.close() closes the connection
    14. 14. EventSource Eventses.onopen = function(evt){};es.onmessage = function(evt){};es.onerror = function(evt){};es.addEventListener();Data object: evt.data
    15. 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. 16. EventSource Browser Support
    17. 17. SEXYDEMOTIME!
    18. 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 WEBSOCKETCHAT DEMO
    19. 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. 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. 21. Questions?
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×