Intro to Web Sockets
Upcoming SlideShare
Loading in...5

Intro to Web Sockets






Total Views
Views on SlideShare
Embed Views



2 Embeds 14 9 5



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.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
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 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(; };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:
  • 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
  • I built a web chat application using WebSocket and EventSource.Oh, and some Node.js and, too. WEBSOCKETCHAT DEMO
  • 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.
  • Resources/Further Reading• web-applications-with-html5-websockets•••• on-to-server-sent-events/•• e/basics/•
  • Questions?