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
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
3. observe.it real-time user tracker 
4.    
5.   @3rd-Eden @3rdEden
6. How much suck is caused by browser bugs Let’s talk browsers
7. Chrome 20 Firefox 12 Opera 12.1 Safari 6 Internet Explorer 10
8. Chrome 4 Firefox 4 Opera 11 Safari 4.2 Internet Explorer 10
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.
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.
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; }
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.
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"); }); };
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"); };
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).
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(); });
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 ;)
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.
19. Firefox can create ghost connections when you connect during ws.onclose These stay alive even after you’ve closed your tab
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.
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 }
22. Building and scaling your server Infrastructure & tooling
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
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??
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
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
27. wsssh, wscat They are the netcat for WebSockets wsbench, websocketbenchmark Cannot compete with ab/seige/wrk or are out dated
28. thor God of thunder, son of Odin, smasher of WebSockets! github.com/observing/thor
29. The environment that you can’t control Your precious users
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.
31. Enterprise proxies usually block every non standard port Only port 80, 443 and sometimes 843 are allowed (and some other non web ports)
32. Virus scanners actively target ports allowed by firewalls Because this is where all the garbage enters.
35. What are we dealing with? Facts and figures
36. 25% 75% Supported Not supported WebSocket support
37. 8% 92% Success Failed Success rate mmm pizza
38. 7% 5% 3% 86% No proxy success With proxy failed No proxy failed With proxy success Success rate, detailed
39. Success rate, per browser 0 25.00 50.00 75.00 100.00 Gecko Safari Firefox Chrome WebSocket enabled Success rate
40. Success rate vs comet 80.00 85.00 90.00 95.00 100.00 Gecko Safari Firefox Chrome Comet WebSocket
41. and what is the best way of handing this What does this all mean?
42. Always use SSL or SPDY use SSL/SPDY terminators to minimize the overhead
43. Avoid WebSockets on mobile when it makes sense
44. Know your framework internals faye, signalr, xsockets, sockjs, socket.io et all
45.  Do you really need it? Aren’t you just following a hype?
46.  Provide fallbacks for more browser coverage
47.  Provide fallbacks for more browser coverage   ⇆  WebSocket FlashSocket HTML File XHR Polling JSONP Polling
48.  Provide fallbacks for more browser coverage   ⇆  WebSocket FlashSocket HTML File XHR Polling JSONP Polling
49.  Provide fallbacks for more browser coverage   ⇆  WebSocket FlashSocket HTML File XHR Polling JSONP Polling pr be
50.  Provide fallbacks for more browser coverage   ⇆  WebSocket FlashSocket HTML File XHR Polling JSONP Polling WebSocket 443, 843, 8080
51.  ✉ @3rdEden info@3rd-Eden.com Go forth, be awesome Q & A me at  @3rd-Eden