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.

Transcript

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

   View 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 Slide

3. 
   observe.it
   real-time user tracker
   
   

   View Slide

4. 
   
   
   
   
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View 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 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 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 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 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 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 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 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 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 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 Slide

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

    View 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 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 Slide

22. Building and scaling your server
    Infrastructure & tooling
    

    View 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 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 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 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 Slide

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

    View Slide

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

    View Slide

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

    View 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 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 Slide

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

    View Slide

33. View Slide

34. View Slide

35. What are we dealing with?
    Facts and figures
    

    View Slide

36. 25%
    75%
    Supported Not supported
    WebSocket support
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

43. 
    Avoid WebSockets on mobile
    when it makes sense
    

    View Slide

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

    View Slide

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

    View Slide

46. 
    Provide fallbacks
    for more browser coverage
    

    View Slide

47. 
    Provide fallbacks
    for more browser coverage
    
    
    
    ⇆
    
    WebSocket
    FlashSocket
    HTML File
    XHR Polling
    JSONP Polling
    

    View Slide

48. 
    Provide fallbacks
    for more browser coverage
    
    
    
    ⇆
    
    WebSocket
    FlashSocket
    HTML File
    XHR Polling
    JSONP Polling
    

    View Slide

49. 
    Provide fallbacks
    for more browser coverage
    
    
    
    ⇆
    
    WebSocket
    FlashSocket
    HTML File
    XHR Polling
    JSONP Polling
    pr be
    

    View Slide

50. 
    Provide fallbacks
    for more browser coverage
    
    
    
    ⇆
    
    WebSocket
    FlashSocket
    HTML File
    XHR Polling
    JSONP Polling
    WebSocket 443, 843, 8080
    

    View Slide

51. 
    ✉
    @3rdEden
    info@3rd-Eden.com
    Go forth, be awesome
    Q & A me at
    
    @3rd-Eden
    

    View Slide