• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Intro to Web Sockets
 

Intro to Web Sockets

on

  • 1,199 views

 

Statistics

Views

Total Views
1,199
Views on SlideShare
1,185
Embed Views
14

Actions

Likes
0
Downloads
50
Comments
0

2 Embeds 14

http://www.linkedin.com 9
https://www.linkedin.com 5

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • “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 Intro to Web Sockets Presentation Transcript

  • 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!
  • 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 via polling/long-polling• Comet – No standard specification – Very complex to implement
  • HTML5 WebSockets
  • 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!
  • 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) { /* received message */ console.dir(evt.data); };ws.onclose= function(evt){ /* connection closed */ };
  • 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• Same-origin policy applies.
  • EventSource APIvares = new EventSource(url);es.readyState property0 = connecting,1 = open, 2 = closedes.close() closes the connection
  • EventSource Eventses.onopen = function(evt){};es.onmessage = function(evt){};es.onerror = function(evt){};es.addEventListener();Data object: evt.data
  • Sending Messages• MIME type = text/event-stream• Plain-text format• id: message; id defaults to “data” if not specified• New lines (n) are significant
  • 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.linkedin.biz:8080/SUPER-AWESOME WEBSOCKETCHAT DEMO
  • 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.
  • 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/
  • Questions?