Your SlideShare is downloading. ×

Intro to Web Sockets

1,162

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,162
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
54
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
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
  • Transcript

    • 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. 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 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. WebSocket API (ctd)// Send a messagews.send(“Do you like the scary clowns?!?”);// Close the connectionws.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 APIvares = new EventSource(url);es.readyState property0 = connecting,1 = open, 2 = closedes.close() closes the connection
    • 14. EventSource Eventses.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. SEXYDEMOTIME!
    • 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. 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?

    ×