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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Intro to Web Sockets

1,171

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,171
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?

    ×