High Performance WebSocket

High Performance WebSocket

Fluent 2015

9d8e12bccfbfea63c86b38a2a27315cd?s=128

Wesley Hales

April 23, 2015
Tweet

Transcript

  1. High Performance WebSocket @wesleyhales

  2. @wesleyhales 1999 2015 2008 HTTP/1.1 WebSocket SSE HTTP/2 2006 2009

    SPDY 2005 AJAX 2000 REST Real Time Enablers
  3. In 2015, bidirectional client <-> server communication can only be

    achieved with AJAX and/or WebSocket
  4. @wesleyhales High Performance Browser Networking by @igvita Client Server Connectivity

  5. @wesleyhales AJAX The underlying complexity is abstracted away. When you

    make an AJAX request from the browser you don’t have to think about TCP.
  6. @wesleyhales WebSocket Subprotocols, Fallbacks, Network When you send a message

    over a WebSocket connection, you have to think about everything.
  7. @wesleyhales http://blog.fanout.io/2014/06/24/you-might-not-need-a-websocket/

  8. @wesleyhales Real Time? • Rapid client <-> server communication •

    Real time execution of events in browser • Binary data delivery
  9. @wesleyhales WebSocket

  10. @wesleyhales The Promise Idea “ facilitating live content and the

    creation of real-time games”
  11. @wesleyhales So let’s give that a try…

  12. @wesleyhales High Performance WS Live Demo Open Connection Punch Through

    Proxies Process and/or Respond
  13. @wesleyhales High Performance Hurdles • Server Side Connections • Networks

    and Proxies • Subprotocols • Time • Services vs. Frameworks
  14. @wesleyhales Server Side Connections • Up to 1M concurrent connections

    • Low Overhead • Bidirectional
  15. @wesleyhales Networks and Proxies

  16. @wesleyhales TL;DR Use TLS Networks & Proxies 99.9% Guaranteed Connection

  17. @wesleyhales Networks High Performance Browser Networking by @igvita

  18. @wesleyhales Networks High Performance Browser Networking by @igvita

  19. @wesleyhales Networks

  20. @wesleyhales Subprotocols Because one isn’t enough

  21. @wesleyhales Subprotocols var ws = new WebSocket('wss://example.com/socket', ['appProtocol', ‘appProtocol-v2']); ws.onopen

    = function () { if (ws.protocol == 'appProtocol-v2') { ... } else { ... } } Meta data for the client <-> server transmission *No effect on the core WebSocket API
  22. @wesleyhales Messaging Protocol

  23. @wesleyhales Subprotocols You have to use an envelope e.g. JSON

  24. @wesleyhales Time Why should you care?

  25. @wesleyhales Time Client Side Synchronization • Headers vs. Content rewrite

    • Resource Timing on AJAX
  26. @wesleyhales Time Get the data from an AJAX request in

    4 easy steps var serverTimeMillisUTC; var oReq = new XMLHttpRequest(); oReq.onload = function(){ var dateStr = oReq.getResponseHeader('Date'); serverTimeMillisUTC = new Date(Date.parse(dateStr)).getTime(); }; oReq.open("HEAD", "/?foo123", false); oReq.send(); function getServerTime() { for(tvalue in window.performance.getEntriesByType("resource")){ tresource = window.performance.getEntriesByType("resource")[tvalue]; if(tresource.name.indexOf('foo123') > 0){ return serverTimeMillisUTC + (tresource.responseEnd - tresource.responseStart); } } }
  27. @wesleyhales Time Why would I do this? Client Server Ajax

    Date Header Call Ajax Date Header Response 12:30:11 12:15:22 What is response time?
  28. @wesleyhales Time 1. Get the date header from the server

    var oReq = new XMLHttpRequest(); oReq.onload = function(){ var dateStr = oReq.getResponseHeader('Date'); serverTimeMillisUTC = new Date(Date.parse(dateStr)).getTime(); }; oReq.open("HEAD", "/?foo123", false); oReq.send(); 2. User random query param
  29. @wesleyhales Time 3. Filter on random query param if(tresource.name.indexOf('foo123') >

    0){ return serverTimeMillisUTC +
 (tresource.responseEnd - tresource.responseStart); } 4. Calculate Server Time
  30. @wesleyhales What Time Is It? Edge 4 (Data) Edge 2

    (Seek)
  31. @wesleyhales Services and Frameworks

  32. Service or Homegrown? Services Frameworks Servers

  33. @wesleyhales Tips

  34. @wesleyhales Head of Line Blocking Large messages block frame delivery

    Latency Sensitive Data? Split up the large messages Screenshots are sent as binary data over wss:// in onslyde’s dashboard client side code on github
  35. @wesleyhales Compression Extensions are managed by the browser 
 (spec

    says it’s a “framework”) wss:// connection headers 1) Chrome has implicit support (no config on client) 2) Compresses any message over 10 bytes
  36. @wesleyhales Make Sure You Need It Do you need WebSocket?

    
 HTTP2, SPDY, SSE, and WebSocket are all different. They could be combined. Are you willing to polyfill your WebSocket Implementation?
  37. @wesleyhales Thanks!

  38. @wesleyhales

  39. @wesleyhales Appendix

  40. @wesleyhales Browser Event Firing All Events Fire onmessage window.addEventListener('remoteMarkup', function(e)

    { var markup = JSON.parse(e.markup); document.getElementById('from-slide').innerHTML =
 decodeURIComponent(markup.remoteMarkup); }, false); onmessage: function (m) { var event = (m.data); event = (new Function("return " + event))(); event.onslydeEvent.fire(); } Remote Control listens
  41. @wesleyhales Demo 1 HTTP/2 Demo 2