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

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.

Arnout Kazemier

April 22, 2013
Tweet

More Decks by Arnout Kazemier

Other Decks in Technology

Transcript



  1. WebSuckets™
    how to make it suck less
    Caution, feelings might get hurt

    View full-size slide

  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

    View full-size slide


  3. observe.it
    real-time user tracker

    View full-size slide






  4. View full-size slide

  5.  
    @3rd-Eden
    @3rdEden

    View full-size slide

  6. How much suck is caused by
    browser bugs
    Let’s talk browsers

    View full-size slide

  7. Chrome 20
    Firefox 12
    Opera 12.1
    Safari 6
    Internet Explorer 10

    View full-size slide

  8. Chrome 4
    Firefox 4
    Opera 11
    Safari 4.2
    Internet Explorer 10

    View full-size slide

  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.

    View full-size slide

  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.

    View full-size slide

  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;
    }

    View full-size slide

  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.

    View full-size slide

  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");
    });
    };

    View full-size slide

  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");
    };

    View full-size slide

  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).

    View full-size slide

  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();
    });

    View full-size slide

  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 ;)

    View full-size slide

  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.

    View full-size slide

  19. Firefox can create ghost
    connections when you connect
    during ws.onclose
    These stay alive even after you’ve closed your tab

    View full-size slide

  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.

    View full-size slide

  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
    }

    View full-size slide

  22. Building and scaling your server
    Infrastructure & tooling

    View full-size slide

  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

    View full-size slide

  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??

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  27. wsssh, wscat
    They are the netcat for WebSockets
    wsbench, websocketbenchmark
    Cannot compete with ab/seige/wrk or are out dated

    View full-size slide

  28. thor
    God of thunder, son of Odin, smasher of
    WebSockets!
    github.com/observing/thor

    View full-size slide

  29. The environment that you can’t control
    Your precious users

    View full-size slide

  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.

    View full-size slide

  31. Enterprise proxies usually block
    every non standard port
    Only port 80, 443 and sometimes 843 are allowed (and
    some other non web ports)

    View full-size slide

  32. Virus scanners actively target
    ports allowed by firewalls
    Because this is where all the garbage enters.

    View full-size slide

  33. What are we dealing with?
    Facts and figures

    View full-size slide

  34. 25%
    75%
    Supported Not supported
    WebSocket support

    View full-size slide

  35. 8%
    92%
    Success Failed
    Success rate
    mmm pizza

    View full-size slide

  36. 7%
    5%
    3%
    86%
    No proxy success
    With proxy failed
    No proxy failed
    With proxy success
    Success rate, detailed

    View full-size slide

  37. Success rate, per browser
    0
    25.00
    50.00
    75.00
    100.00
    Gecko Safari Firefox Chrome
    WebSocket enabled
    Success rate

    View full-size slide

  38. Success rate vs comet
    80.00
    85.00
    90.00
    95.00
    100.00
    Gecko Safari Firefox Chrome
    Comet WebSocket

    View full-size slide

  39. and what is the best way of handing this
    What does this all mean?

    View full-size slide


  40. Always use SSL or SPDY
    use SSL/SPDY terminators to minimize the overhead

    View full-size slide


  41. Avoid WebSockets on mobile
    when it makes sense

    View full-size slide


  42. Know your framework internals
    faye, signalr, xsockets, sockjs, socket.io et all

    View full-size slide


  43. Do you really need it?
    Aren’t you just following a hype?

    View full-size slide


  44. Provide fallbacks
    for more browser coverage

    View full-size slide


  45. Provide fallbacks
    for more browser coverage





    WebSocket
    FlashSocket
    HTML File
    XHR Polling
    JSONP Polling

    View full-size slide


  46. Provide fallbacks
    for more browser coverage





    WebSocket
    FlashSocket
    HTML File
    XHR Polling
    JSONP Polling

    View full-size slide


  47. Provide fallbacks
    for more browser coverage





    WebSocket
    FlashSocket
    HTML File
    XHR Polling
    JSONP Polling
    pr be

    View full-size slide


  48. Provide fallbacks
    for more browser coverage





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

    View full-size slide



  49. @3rdEden
    [email protected]
    Go forth, be awesome
    Q & A me at

    @3rd-Eden

    View full-size slide