Intro to Web Sockets


Published on

Published in: Technology, Education
  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
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 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(; };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:
    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, too. WEBSOCKETCHAT DEMO
    19. 19. Take-Aways• is to WebSockets as Jquery is to DOM• documentation sucks.• Web examples for suck.• Node.js is weirdly cool, and overwhelming in a Java sort of way.
    20. 20. Resources/Further Reading• web-applications-with-html5-websockets•••• on-to-server-sent-events/•• e/basics/•
    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.