Your SlideShare is downloading. ×
  • Like
Intro to Web Sockets
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Intro to Web Sockets

  • 1,113 views
Published

 

Published in Technology , Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,113
On SlideShare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
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?