Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The realtime web: HTTP/1.1 to WebSocket, SPDY &...

The realtime web: HTTP/1.1 to WebSocket, SPDY & beyond

Guillermo Rauch

November 07, 2012
Tweet

More Decks by Guillermo Rauch

Other Decks in Programming

Transcript

  1. “In January this year (2010), Gmail switched to using HTTPS

    for everything by default […] In our production frontend machines, SSL/TLS accounts for less than 1% of the CPU load, less than 10KB of memory per connection and less than 2% of network overhead.” http://www.imperialviolet.org/2010/06/25/overclocking-ssl.html (emphasis mine)
  2. 3. Request headers 1. Accept:text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 2. Accept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.3 3. Accept-Encoding:gzip,deflate,sdch 4.

    Accept-Language:en-US,en;q=0.8 5. Cache-Control:max-age=0 6. Connection:keep-alive 7. Host:www.imperialviolet.org 8. If-Modified-Since:Tue, 06 Nov 2012 21:22:53 GMT 9. User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_2) AppleWebKit/537.17 (KHTML, like Gecko) Chrome/24.0.1312.5 Safari/537.17
  3. 1. Accept:text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 2. Accept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.3 3. Accept-Encoding:gzip,deflate,sdch 4. Accept-Language:en-US,en;q=0.8 5. Cache-Control:max-age=0

    6. Connection:keep-alive 7. Host:www.myhost.com 8. User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_2) AppleWebKit/537.17 (KHTML, like Gecko) Chrome/24.0.1312.5 Safari/537.17 1. { “c”: “a” } Headers Body (JSON obj)
  4. If the server has no data to send us, we

    would be generating a LOT of traffic.
  5. function send(data){ var xhr = new XMLHttpRequest(); xhr.open(‘POST’, ‘/’, false);

    xhr.send(data); } function get(fn) { var xhr = new XMLHttpRequest(); xhr.open(‘GET’, ‘/’, false); xhr.send(data); xhr.onreadystatechange = function(){ if (200 == xhr.status) { fn(); // send data to user get(); // restart poll } } }
  6. We try to create a data packet with “b” “c”

    and “d” to minimize the request headers traffic.
  7. 1. Accept:text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 2. Accept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.3 3. Accept-Encoding:gzip,deflate,sdch 4. Accept-Language:en-US,en;q=0.8 5. Cache-Control:max-age=0

    6. Connection:keep-alive 7. Host:www.myhost.com 8. User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_2) AppleWebKit/537.17 (KHTML, like Gecko) Chrome/24.0.1312.5 Safari/537.17 1. [{ “c”: “b” }, { “c”: “c” }, { “c”: “d” }] Headers Body (JSON Array)
  8. Server and client need to agree that the data is

    not simply the request body, but within it.
  9. <div class=”wrap-outer”> <div class=”wrap”> <div class=”wrap-inner”> <div class=”content”> </div> </div>

    </div> </div> Circa 2001 .wrap-outer { background: …; padding: …; } .wrap { background: …; padding: …; } .wrap-inner { background: …; padding: …; }
  10. Circa 2001 - Data buffering on server within GET polls.

    - Data buffering on client. - JSON protocol or equivalent. - XMLHttpRequest fallbacks - Cross-domain tricks - …
  11. var ws = new WebSocket(); ws.onopen = function(){}; ws.onclose =

    function(){}; ws.onmessage = function(){};
  12. But WS is buggy on mobile, unavailable in older browsers,

    not understood by all middleware, breaks often without SSL.
  13. var ws = new eio.Socket(); ws.onopen = function(){}; ws.onclose =

    function(){}; ws.onmessage = function(){};
  14. “SPDY compresses request and response HTTP headers, resulting in fewer

    packets and fewer bytes transmitted.” http://www.chromium.org/spdy/spdy-whitepaper
  15. “SPDY allows for unlimited concurrent streams over a single TCP

    connection.” http://www.chromium.org/spdy/spdy-whitepaper
  16. “With this protocol, WebSocket API get both benefits of usable

    bi-directional communication API, and a fast, secure, and scalable multiplexing mechanism on the top of SPDY” https://docs.google.com/document/d/1zUEFzz7NCls3Yms8hXxY4wGXJ3EEvoZc3GihrqPQcM0/edit#
  17. var socket = io.connect(); socket.on(‘character’, function(){ // render! }); socket.on(‘chat

    message’, function(){ // render! }); socket.emit(‘ready!’);
  18. The goal is to not just focus on the speed

    of data transfer but also speed of development.
  19. While ensuring the reliability that the data can be exchanged

    in the fastest way, in every network, on every device.