Sometimes WebSockets don't work

WebSockets have been with us for quite a while, but there are still people using ancient browsers or being held back by selfish proxies. Because of that, it's difficult to find out which type of connection is best for a client, so Pusher needed a flexible way to tell clients how to establish a real-time connection efficiently and also monitor their behaviour. This talk will give you an overview on how it works, what interesting metrics we got out of it and how we evaluated them.

Transcript

1. SOMETIMES WEBSOCKETS DON’T WORK @pawel_ledwon
3. WebSockets as a Service Abstractions over Connections Publishing API Pusher?
4. cool persistent bi-directional easy to use fast WebSockets
5. Example var websocket = new WebSocket("ws://example.com"); websocket.onopen = function() { websocket.send("Howdy!"); }; websocket.onmessage = function(message) { console.log("BEEP", message.data); };
6. You wish!
7. Problems
8. ancient browsers 1
9. ancient browsers 1 firewalls & proxies 2
10. ancient browsers 1 firewalls & proxies 2 antivirus software 3
11. ancient browsers 1 firewalls & proxies 2 antivirus software 3 flaky networks 4
12. Solution
13. improve connectivity Primary Objectives
14. improve connectivity provide best transports Primary Objectives
15. improve connectivity provide best transports improve initial latency Primary Objectives
16. keep costs reasonable Secondary Objectives
17. keep costs reasonable gather lots of metrics Secondary Objectives
18. keep costs reasonable gather lots of metrics allow experimenting Secondary Objectives
19. Basics
20. Transports
21. WebSockets Transports 1.0+
22. WebSockets Flash Transports 1.0+ 1.2+
23. WebSockets Flash SockJS Transports 1.0+ 1.2+ 2.0+
24. Flash is not bad! when it’s connected it has all advantages of WebSockets just takes more time to connect
25. Scenarios
26. Problem Bob is using IE6, it doesn’t support WebSockets.
27. Problem Bob is using IE6, it doesn’t support WebSockets. Strategy Flash should be the primary transport.
28. Problem Jenny works for a bank. Her IT department thinks closing port 843 will make her more productive.
29. Problem Jenny works for a bank. Her IT department thinks closing port 843 will make her more productive. Strategy Can’t detect the problem without waiting. Should try Flash and SockJS in parallel.
30. Problem Larry is on a 3G network. Unfortunately, it kills WebSockets after 60 seconds.
31. Problem Larry is on a 3G network. Unfortunately, it kills WebSockets after 60 seconds. Strategy WebSockets and Flash should be disabled after noticing failed connections.
32. Problem Suzzy has a Windows PC with Über Antivirus©; It thinks WebSockets will steal her credit card.
33. Problem Strategy Should fall back to SockJS. Should also remember not to try WebSockets. Suzzy has a Windows PC with Über Antivirus©; It thinks WebSockets will steal her credit card.
34. Problem Jeff is on a network which inspects HTTP traffic. WebSockets don’t work when unencrypted.
35. Problem Strategy Should encrypt the connection or use SockJS. Jeff is on a network which inspects HTTP traffic. WebSockets don’t work when unencrypted.
36. Falling back
37. Falling back Flash SockJS
38. Falling back Flash SockJS Flash SockJS
39. Falling back Flash SockJS Flash SockJS Flash SockJS
40. Falling back Flash SockJS Flash SockJS Flash SockJS Flash SockJS
41. Strategy
42. Strategy how to establish a connection
43. Strategy which transport to use? how to behave after connecting? how to detect failures? what to do if a transport fails?
44. Requirements 1. quick and effective 2. easy to understand 3. simple to test 4. easy to modify
45. Responsibilities detect browser features connect in parallel retry attempts support delays cache transport info detect disconnections disable transports support timeouts
46. Implementation
47. Transport
48. Transport state machine new
49. Transport state machine new initializing initialize
50. Transport state machine new initialized initializing initialize
51. Transport state machine new initialized initializing initialize initialize
52. Transport state machine new initialized initializing connecting initialize initialize connect
53. Transport state machine new initialized initializing connecting open initialize initialize connect
54. Transport state machine new initialized initializing connecting open closed initialize initialize connect
55. Transport state machine new initialized initializing connecting open closed initialize initialize connect
56. Transport state machine new initialized initializing connecting open closed initialize initialize connect close* close* * transport can close itself
57. Strategy
58. Example var strategy = new OuterStrategy(new InnerStrategy()); var runner = strategy.connect(function(error, connection) { if (error) { console.log("Failed", error); } else { console.log("Connected", connection); } }); runner.abort();
59. Example var strategy = new OuterStrategy(new InnerStrategy()); var runner = strategy.connect(function(error, connection) { if (error) { console.log("Failed", error); } else { console.log("Connected", connection); } }); runner.abort(); var strategy = new OuterStrategy(new InnerStrategy()); strategies can be composed
60. Example var strategy = new OuterStrategy(new InnerStrategy()); var runner = strategy.connect(function(error, connection) { if (error) { console.log("Failed", error); } else { console.log("Connected", connection); } }); runner.abort(); var runner = strategy.connect(function(error, connection) { execution state encapsulated in the runner
61. Example var strategy = new OuterStrategy(new InnerStrategy()); var runner = strategy.connect(function(error, connection) { if (error) { console.log("Failed", error); } else { console.log("Connected", connection); } }); runner.abort(); var runner = strategy.connect(function(error, connection) { errors and connections are passed to the callback
62. Example var strategy = new OuterStrategy(new InnerStrategy()); var runner = strategy.connect(function(error, connection) { if (error) { console.log("Failed", error); } else { console.log("Connected", connection); } }); runner.abort(); if (error) { console.log("Failed", error); } strategies fail only once…
63. Example var strategy = new OuterStrategy(new InnerStrategy()); var runner = strategy.connect(function(error, connection) { if (error) { console.log("Failed", error); } else { console.log("Connected", connection); } }); runner.abort(); else { console.log("Connected", connection); } …but can call back multiple times with connections
64. Example var strategy = new OuterStrategy(new InnerStrategy()); var runner = strategy.connect(function(error, connection) { if (error) { console.log("Failed", error); } else { console.log("Connected", connection); } }); runner.abort(); runner.abort(); strategy execution can be aborted anytime
65. Simplicity Rules simple classes one responsibility composability
66. Strategy Tree
67. ws transport wraps transports in a strategy interface WebSocket transport
68. ws transport sequential manages timeouts and retries
69. ws sockjs transport transport sequential sequential fallback branch should work the same way
70. ws sockjs transport transport delayed sequential sequential however, we’d like the fallback to be delayed
71. ws sockjs transport transport delayed sequential sequential best connected there’s no point in using SockJS after a WebSocket connected choose the best transport
72. ws sockjs transport transport if ws.isSupported() delayed sequential sequential best connected true we only want to do this if WebSockets are supported
73. ws sockjs transport transport if ws.isSupported() delayed sequential sequential best connected sockjs transport sequential true false otherwise use SockJS without a delay
74. ws sockjs transport transport if ws.isSupported() delayed sequential sequential best connected cached sockjs transport sequential true false cache connected transport name
75. DSL
76. HTTP Hello World Example
77. Non-DSL var http = require("http"); var url = require("url"); var server = http.createServer(function(request, response) { var requestURL = url.parse(request.url); if (request.method === "GET") { var match = requestURL.pathname.match(/\/hello\/(.+)/); if (match) { response.writeHead(200); response.end("Hello, " + match[1] + "!"); return; } } response.writeHead(404); response.end(); });
78. DSL var express = require("express"); var app = express(); app.get("/hello/:name" function(request, response) { response.send("Hello, " + request.params.name + "!"); });
79. Advantages focus on the domain higher abstraction less noise less things to go wrong
80. DSL should be 1. readable for humans 2. easy to parse in JavaScript 3. possible to send over HTTP 4. trivial to modify
81. Our Options 1. JavaScript 2. JSON
82. JavaScript known by everyone no need for a parser “easy” to execute
83. JavaScript too expressive difficult to test slightly noisy
84. Options 1. JavaScript 2. JSON
85. JSON has no side-effects widely supported known by everyone
86. JSON needs an interpreter
87. We chose JSON
88. Symbols “:this_is_a_symbol” symbols are strings starting with a colon they expand to values of different types
89. Function Calls [“:function”, 1, “:argument”] function calls are represented as arrays
90. Function Calls [“:function”, 1, “:argument”] first element is a symbol it is the function to be called
91. Function Calls [“:function”, 1, “:argument”] all following elements are arguments they can be of any JSON value type
92. Function Calls [“:function”, 1, “:argument”] arguments can also be symbols they are expanded and passed to the function
93. Function Nesting [“:mult”, 3, [“:add”, 2, 3]] nested expressions are evaluated first the result is passed as an argument // 3 * (2 + 3)
94. That’s it!
95. How to use it?
96. implement base functions 1 initialize execution context 2 execute the expression 3
97. implement base functions 1 initialize execution context 2 execute the expression 3
98. Base Functions [“:def”, “name”, value] defines a symbol in the context
99. Base Functions [“:def_transport”, “name”, “type”, params, manager ] creates a transport builder and binds it to a symbol
100. Strategy Functions [“:is_supported”, “:transport”] [“:if”, test, true_branch, false_branch] [“:sequential”, params, strategy1, strategy2, …] [“:delayed”, delay, strategy] [“:best_connected_ever”, strategy1, strategy2, …] [“:first_connected”, strategy] [“:cached”, ttl, strategy]
101. implement base functions 1 initialize execution context 2 execute the expression 3
102. Initial Context var context = { def: function(...) { ... }, def_transport: function(...) { ... }, is_supported: function(...) { ... }, if: function(...) { ... }, sequential: function(...) { ... }, delayed: function(...) { ... }, best_connected_ever: function(...) { ... }, first_connected: function(...) { ... }, cached: function(...) { ... } };
103. implement base functions 1 initialize execution context 2 execute the expression 3
104. Execution var result = Interpreter.execute( expression, context );
105. New Strategy
106. 1 define transports 2 define strategies 3 define parameters
107. define parameters 1 define transports 2 define strategies 3
108. Parameters [":def", "ws_options", { hostUnencrypted: Pusher.host + ":" + Pusher.ws_port, hostEncrypted: Pusher.host + ":" + Pusher.wss_port }] [":def", "sockjs_options", { hostUnencrypted: Pusher.sockjs_host + ":" + Pusher.sockjs_http_port, hostEncrypted: Pusher.sockjs_host + ":" + Pusher.sockjs_https_port }] [":def", "timeouts", { loop: true, timeout: 15000, timeoutLimit: 60000 }]
109. define parameters 1 define transports 2 define strategies 3
110. Transports [":def", "ws_manager", [":transport_manager", { lives: 2 }]], [":def_transport", "ws", "ws", 3, ":ws_options", ":ws_manager"], [":def_transport", "flash", "flash", 2, ":ws_options", ":ws_manager"], [":def_transport", "sockjs", "sockjs", 1, ":sockjs_options"], [":def", "ws_loop", [":sequential", ":timeouts", ":ws"]], [":def", "flash_loop", [":sequential", ":timeouts", ":flash"]], [":def", "sockjs_loop", [":sequential", ":timeouts", ":sockjs"]], disables transports after getting disconnected twice
111. Transports [":def", "ws_manager", [":transport_manager", { lives: 2 }]], [":def_transport", "ws", "ws", 3, ":ws_options", ":ws_manager"], [":def_transport", "flash", "flash", 2, ":ws_options", ":ws_manager"], [":def_transport", "sockjs", "sockjs", 1, ":sockjs_options"], [":def", "ws_loop", [":sequential", ":timeouts", ":ws"]], [":def", "flash_loop", [":sequential", ":timeouts", ":flash"]], [":def", "sockjs_loop", [":sequential", ":timeouts", ":sockjs"]], declare loops with timeouts to avoid repetition
112. define parameters 1 define transports 2 define strategies 3
113. Strategy [":cached", 1800000, [":first_connected", [":if", [":is_supported", ":ws"], [":best_connected_ever", ":ws_loop", [":delayed", 2000, [":sockjs_loop"]]], [":if", [":is_supported", ":flash"], [":best_connected_ever", ":flash_loop", [":delayed", 2000, [":sockjs_loop"]]], // else [":sockjs_loop"] ]] ] ]
114. Strategy [":cached", 1800000, [":first_connected", [":if", [":is_supported", ":ws"], [":best_connected_ever", ":ws_loop", [":delayed", 2000, [":sockjs_loop"]]], [":if", [":is_supported", ":flash"], [":best_connected_ever", ":flash_loop", [":delayed", 2000, [":sockjs_loop"]]], // else [":sockjs_loop"] ]] ] ] WebSockets Flash SockJS
115. Strategy [":cached", 1800000, [":first_connected", [":if", [":is_supported", ":ws"], [":best_connected_ever", ":ws_loop", [":delayed", 2000, [":sockjs_loop"]]], [":if", [":is_supported", ":flash"], [":best_connected_ever", ":flash_loop", [":delayed", 2000, [":sockjs_loop"]]], // else [":sockjs_loop"] ]] ] ] delayed SockJS fallback for WebSocket branch delayed SockJS fallback for Flash branch
116. Strategy [":cached", 1800000, [":first_connected", [":if", [":is_supported", ":ws"], [":best_connected_ever", ":ws_loop", [":delayed", 2000, [":sockjs_loop"]]], [":if", [":is_supported", ":flash"], [":best_connected_ever", ":flash_loop", [":delayed", 2000, [":sockjs_loop"]]], // else [":sockjs_loop"] ]] ] ] we don’t support switching connections yet take the first one and finish
117. Strategy [":cached", 1800000, [":first_connected", [":if", [":is_supported", ":ws"], [":best_connected_ever", ":ws_loop", [":delayed", 2000, [":sockjs_loop"]]], [":if", [":is_supported", ":flash"], [":best_connected_ever", ":flash_loop", [":delayed", 2000, [":sockjs_loop"]]], // else [":sockjs_loop"] ]] ] ] cache last used transport for 30 minutes
118. Stats
119. 99.7% Success Rate
120. Browser Features WebSockets Flash Nothing 78.5% 80.2% 2.3%
121. WebSockets vs HTTP successful connections 0 17500 35000 52500 70000 WebSockets Flash SockJS first connection last connection
122. WebSockets vs Flash latency 50% 75% 90% 95% 99% 680ms 1450ms 1074ms 1969ms 1985ms 3199ms 3137ms 4932ms 7888ms 10971ms WebSockets Flash
123. Browser Wars IE6 IE7 IE8 IE9 IE10 Chrome Safari Firefox Opera Mobile 131 (0.11%) 4668 (3.96%) 8706 (7.40%) 8007 (6.80%) 2049 (1.74%) 47692 (40.52%) 3093 (2.62%) 19316 (16.41%) 1302 (1.11%) 22759 (19.33%)
124. Android vs iOS 0 0.038 0.075 0.113 0.15 ??? ???
125. Android vs iOS 0 0.038 0.075 0.113 0.15 Android iOS
126. THANKS! @pawel_ledwon