WebSuckets

 WebSuckets

This the presentation that I gave during Real-time Conference Europe 2013 (http://realtimeconf.eu). It's a small summary of all the issues that you can have with websockets ranging from browsers to infrastructure to issues you cannot control such as the users environment.

The slides looks crap because they are generated to a pdf file so no fancy pancy animations that ties it all nicely together. Anyways, enjoy, read, learn and be awesome.

21f4971707a00270b92e2ae791d5633d?s=128

Arnout Kazemier

April 22, 2013
Tweet

Transcript

  1. 2.

    W E B S O C K E S WEBSUCKETS

    REAL- T I M E N O D E . J S JAVASCRIPT HADOOP R E D I S M O N G O D B SCALABILITY MESSAGE QUEUES DATABASE OPEN SOURCE ,OHAI, SOCKET.IO PROXIieES, ( \ / ) ( ; , , ; ) ( \ / ) N G I N X , VARNISH FRONT-END B U I L D S Y S T E M S DISTRIBUTED SYSTEMS L O A D B A L A N C E R S CLOUDS DRONES HIGH AVAILABLITY & MORE
  2. 9.

    Using or detecting HTTP proxies crashes all Safari browsers below

    version 5.1.4 This causes a full browser or tab crash. These network settings cannot be detected.
  3. 10.

    Using or detecting HTTP proxies crashes all Safari browsers below

    version 5.1.4 This causes a full browser or tab crash. These network settings cannot be detected.
  4. 11.

    Using or detecting HTTP proxies crashes all Safari browsers below

    version 5.1.4 This causes a full browser or tab crash. These network settings cannot be detected. ◅ ▻ if ( // Target safari browsers $.browser.safari // Not chrome && !$.browser.chrome // And correct WebKit version && parseFloat($.browser.version, 0) < 534.54 ) { // Don’t use WebSockets return; }
  5. 12.

    Writing to a closed WebSocket connection can crash your phone

    Affects Mobile Safari when returning to the page from a different tab or retrieving Safari from the background.
  6. 13.

    Writing to a closed WebSocket connection can crash your phone

    Affects Mobile Safari when returning to the page from a different tab or retrieving Safari from the background. ◅ ▻ var ws = new WebSocket("wss://localhost:8080/"); ws.onmessage = function message(event) { // Wrap sends in a setTimeout out to allow the // readyState to be correctly set to closed setTimeout(function () { ws.send("Sup Lyon"); }); };
  7. 14.

    Writing to a closed WebSocket connection can crash your phone

    Affects Mobile Safari when returning to the page from a different tab or retrieving Safari from the background. ◅ ▻ var ws = new WebSocket("wss://localhost:8080/"); ws.onmessage = function message(event) { // Wrap sends in a setTimeout out to allow the // readyState to be correctly set to closed. But // Only have this delay on mobile devices if (mobile) return setTimeout(function () { ws.send("Sup Lyon"); }); ws.send("Sup Lyon"); };
  8. 15.

    Pressing ESC in Firefox after the page is loaded stops

    all network connections It’s the expected behavior during page load. But not after the page is loaded. Fixed in Firefox nightly (20).
  9. 16.

    Pressing ESC in Firefox after the page is loaded stops

    all network connections It’s the expected behavior during page load. But not after the page is loaded. Fixed in Firefox nightly (20). ◅ ▻ $('body').keydown(function (e) { // make sure that you capture the `esc` key and // prevent it's default action from happening if (e.which === 27) e.preventDefault(); });
  10. 17.

    Don’t use self signed SSL certificates, not for development and

    not in production Browsers have a hard time accepting these requests and you look like a cheap d*ck ;)
  11. 18.

    Firefox cannot connect to a unsecured WebSocket server from HTTPS.

    While this behavior makes sense from a security standpoint.. It shouldn’t throw an error.
  12. 19.

    Firefox can create ghost connections when you connect during ws.onclose

    These stay alive even after you’ve closed your tab
  13. 20.

    4G, 3G, LTE, mobile providers WTF ARE YOU DOING?? There

    isn’t just one single mobile provider to blame, there are many of them and they all block differently.
  14. 21.

    4G, 3G, LTE, mobile providers WTF ARE YOU DOING?? There

    isn’t just one single mobile provider to blame, there are many of them and they all block differently. ◅ ▻ var ua = navigator.userAgent.toLowerCase(); // Detect all possible mobile phones to filter out // WebSockets if ( ~ua.indexOf('mobile') || ~ua.indexOf('android') || ~ua.indexOf('ios') || .. and more .. ) { // Don't use WebSockets }
  15. 23.

    HAProxy Used TCP mode, so no header rewriting or IP

    forwarding but lightweight. HTTP-Proxy Highly customizable library build on top of Node.js. Stable releases compatible with WebSuckets™ Compatible
  16. 24.

    HAProxy Used TCP mode, so no header rewriting or IP

    forwarding but lightweight. HTTP-Proxy Highly customizable library build on top of Node.js. Nginx Did not support Websockets or HTTP 1.1 proxing Apache Just trolling, nobody uses this. Right??
  17. 25.

    HAProxy SSL termination, WebSocket support and great load balancing capabilities.

    HTTP-Proxy Highly customizable library build on top of Node.js. Nginx SSL termination, WebSocket support and can serve static content. development development
  18. 26.

    SSL termination, WebSocket support and great load balancing capabilities. HTTP-Proxy

    Highly customizable library build on top of Node.js. Nginx SSL termination, WebSocket support and can serve static content. development HAProxy development 0 200.00 400.00 600.00 800.00 HTTP-Proxy Nginx HAProxy HAProxy/stud Control Message latency Handshake latency 62 ms 30 ms 25 ms 42 ms 65 ms 679 ms 470 ms 464 ms 492 ms 703 ms github.com/observing/balancerbattle
  19. 27.

    wsssh, wscat They are the netcat for WebSockets wsbench, websocketbenchmark

    Cannot compete with ab/seige/wrk or are out dated
  20. 30.

    Extensions Browser plugins such as ad blockers Firewall Because they

    can be “attacked” on the web.. Oooh scary Virus scanner Highly customizable library build on top of Node.js.
  21. 31.

    Enterprise proxies usually block every non standard port Only port

    80, 443 and sometimes 843 are allowed (and some other non web ports)
  22. 33.
  23. 34.
  24. 38.

    7% 5% 3% 86% No proxy success With proxy failed

    No proxy failed With proxy success Success rate, detailed
  25. 39.

    Success rate, per browser 0 25.00 50.00 75.00 100.00 Gecko

    Safari Firefox Chrome WebSocket enabled Success rate
  26. 40.

    Success rate vs comet 80.00 85.00 90.00 95.00 100.00 Gecko

    Safari Firefox Chrome Comet WebSocket
  27. 47.

     Provide fallbacks for more browser coverage   ⇆

     WebSocket FlashSocket HTML File XHR Polling JSONP Polling
  28. 48.

     Provide fallbacks for more browser coverage   ⇆

     WebSocket FlashSocket HTML File XHR Polling JSONP Polling
  29. 49.

     Provide fallbacks for more browser coverage   ⇆

     WebSocket FlashSocket HTML File XHR Polling JSONP Polling pr be
  30. 50.

     Provide fallbacks for more browser coverage   ⇆

     WebSocket FlashSocket HTML File XHR Polling JSONP Polling WebSocket 443, 843, 8080