WebSuckets - Speaker Deck

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

observe.it real-time user tracker 

Slide 4

Slide 4 text

   

Slide 5

Slide 5 text

  @3rd-Eden @3rdEden

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

Chrome 20 Firefox 12 Opera 12.1 Safari 6 Internet Explorer 10

Slide 8

Slide 8 text

Chrome 4 Firefox 4 Opera 11 Safari 4.2 Internet Explorer 10

Slide 9

Slide 9 text

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.

Slide 10

Slide 10 text

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.

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

Writing to a closed WebSocket connection can crash your phone Aﬀects Mobile Safari when returning to the page from a diﬀerent tab or retrieving Safari from the background.

Slide 13

Slide 13 text

Writing to a closed WebSocket connection can crash your phone Aﬀects Mobile Safari when returning to the page from a diﬀerent 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"); }); };

Slide 14

Slide 14 text

Writing to a closed WebSocket connection can crash your phone Aﬀects Mobile Safari when returning to the page from a diﬀerent 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"); };

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

Don’t use self signed SSL certiﬁcates, not for development and not in production Browsers have a hard time accepting these requests and you look like a cheap d*ck ;)

Slide 18

Slide 18 text

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.

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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 diﬀerently.

Slide 21

Slide 21 text

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 diﬀerently. ◅ ▻ 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 }

Slide 22

Slide 22 text

Building and scaling your server Infrastructure & tooling

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

The environment that you can’t control Your precious users

Slide 30

Slide 30 text

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.

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

What are we dealing with? Facts and ﬁgures

Slide 36

Slide 36 text

25% 75% Supported Not supported WebSocket support

Slide 37

Slide 37 text

8% 92% Success Failed Success rate mmm pizza

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

Avoid WebSockets on mobile when it makes sense

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

 Provide fallbacks for more browser coverage

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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