Sometimes web sockets_dont_work
1 like1,165 views
The document discusses strategies for improving connectivity when using WebSockets. It proposes defining different transport options and strategies in JSON format. The suggested strategy first checks if WebSockets are supported, then tries connecting via WebSockets and falls back to SockJS if needed, caching results for future attempts. Metrics on transport states and browser features would be collected to evaluate strategy performance.
![[
[":def", "ws_options", {
hostUnencrypted: Pusher.host + ":" + Pusher.ws_port,
hostEncrypted: Pusher.host + ":" + Pusher.wss_port,
lives: 2
}],
[":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
}],
[":def_transport", "ws", "ws", 3, ":ws_options"],
[":def_transport", "sockjs", "sockjs", 1, ":sockjs_options"],
[":def", "ws_loop", [":sequential", ":timeouts", ":ws"]],
[":def", "sockjs_loop", [":sequential", ":timeouts", ":sockjs"]],
[":def", "strategy",
[":cached", 1800000,
[":if", [":is_supported", ":ws"], [
":best_connected_ever", ":ws_loop", [":delayed", 2000, [":sockjs_loop"]]
], [
":sockjs_loop"
]
]]
]
]
]](https://image.slidesharecdn.com/sometimeswebsocketsdontwork-130315111106-phpapp02/85/Sometimes-web-sockets_dont_work-52-320.jpg)
![[
[":def", "ws_options", {
hostUnencrypted: Pusher.host + ":" + Pusher.ws_port,
hostEncrypted: Pusher.host + ":" + Pusher.wss_port,
lives: 2
}],
[":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
}],
[":def_transport", "ws", "ws", 3, ":ws_options"],
[":def_transport", "sockjs", "sockjs", 1, ":sockjs_options"],
[":def", "ws_loop", [":sequential", ":timeouts", ":ws"]],
[":def", "sockjs_loop", [":sequential", ":timeouts", ":sockjs"]],
[":def", "strategy",
[":cached", 1800000,
[":if", [":is_supported", ":ws"], [
":best_connected_ever", ":ws_loop", [":delayed", 2000, [":sockjs_loop"]]
], [
":sockjs_loop"
]
]]
]
]
]](https://image.slidesharecdn.com/sometimeswebsocketsdontwork-130315111106-phpapp02/85/Sometimes-web-sockets_dont_work-53-320.jpg)
![[
[":def", "ws_options", {
hostUnencrypted: Pusher.host + ":" + Pusher.ws_port,
hostEncrypted: Pusher.host + ":" + Pusher.wss_port,
lives: 2
}],
[":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
}],
[":def_transport", "ws", "ws", 3, ":ws_options"],
[":def_transport", "sockjs", "sockjs", 1, ":sockjs_options"],
[":def", "ws_loop", [":sequential", ":timeouts", ":ws"]],
[":def", "sockjs_loop", [":sequential", ":timeouts", ":sockjs"]],
[":def", "strategy",
[":cached", 1800000,
[":if", [":is_supported", ":ws"], [
":best_connected_ever", ":ws_loop", [":delayed", 2000, [":sockjs_loop"]]
], [
":sockjs_loop"
]
]]
]
]
]](https://image.slidesharecdn.com/sometimeswebsocketsdontwork-130315111106-phpapp02/85/Sometimes-web-sockets_dont_work-54-320.jpg)
![[
[":def", "ws_options", {
hostUnencrypted: Pusher.host + ":" + Pusher.ws_port,
hostEncrypted: Pusher.host + ":" + Pusher.wss_port,
lives: 2
}],
[":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
}],
[":def_transport", "ws", "ws", 3, ":ws_options"],
[":def_transport", "sockjs", "sockjs", 1, ":sockjs_options"],
[":def", "ws_loop", [":sequential", ":timeouts", ":ws"]],
[":def", "sockjs_loop", [":sequential", ":timeouts", ":sockjs"]],
[":def", "strategy",
[":cached", 1800000,
[":if", [":is_supported", ":ws"], [
":best_connected_ever", ":ws_loop", [":delayed", 2000, [":sockjs_loop"]]
], [
":sockjs_loop"
]
]]
]
]
]](https://image.slidesharecdn.com/sometimeswebsocketsdontwork-130315111106-phpapp02/85/Sometimes-web-sockets_dont_work-55-320.jpg)
Sometimes web sockets_dont_work
- 1. SOMETIMES WEBSOCKETS DON’T WORK @pawel_ledwon
- 3. WE DO WEBSOCKETS …and a bit more
- 4. REASONS TO LOVE WebSockets persistent and bi-directional very straightforward API don’t incur too much latency
- 5. var websocket = new WebSocket("ws://example.com"); websocket.onopen = function() { websocket.send("Howdy!"); }; websocket.onmessage = function(message) { console.log("BEEP", message.data); };
- 6. DONE!
- 7. NOPE!
- 8. WHAT’S THE ISSUE? 1.ancient browsers 2.corporate firewalls 3.restrictive proxies ...
- 9. L E T ’S SOLVE THEM!
- 10. PRIMARY OBJECTIVES 1.improve connectivity 2.provide clients with best possible transport 3.improve initial latency
- 11. SECONDARY OBJECTIVES 1.keep costs reasonable 2.gather some metrics 3.allow experimenting
- 12. DESIGN
- 14. DIFFERENT TRANSPORTS WebSockets Flash HTTP-based (SSL/Non-SSL)
- 16. STRATEGY a recipe for finding best working transport
- 17. STRATEGIES SHOULD BE 1.quick and effective 2.easy to understand 3.also easy to test 4.simple to modify
- 18. BACK TO OUR PROBLEMS 1.ancient browsers 2.corporate firewalls 3.restrictive proxies
- 19. ANCIENT BROWSERS easiest problem to solve client-side checks no communication needed
- 20. if (WebSocketTransport.isSupported()) { return WebSocketTransport; } else if (FlashTransport.isSupported()) { return FlashTransport; } else { return HTTPTransport; }
- 22. BACK TO OUR PROBLEMS 1.ancient browsers 2.corporate firewalls 3.restrictive proxies
- 23. FLASH & FIREWALLS neeeds port 843 to be open or… waits 3s before trying original port … you never know what’s coming
- 24. FLASH IS NOT THAT BAD 1.it’s basically a WebSocket 2.has low message latency 3.requires less infrastructure
- 25. DIFFERENT SOLUTIONS 1.give up and avoid Flash 2.wait and switch to HTTP 3.try Flash & HTTP in parallel 1.use first connected 2.switch to Flash
- 26. CONNECTING IN PARALLEL Flash a) HTTP Flash b) HTTP Flash c) HTTP
- 27. BACK TO OUR PROBLEMS 1.ancient browsers 2.corporate firewalls 3.restrictive proxies
- 28. WEBSOCKETS & PROXIES some work just fine some are too old some just hate us all
- 29. WEBSOCKETS & PROXIES issues with upgrading frequent disconnections same issue with Flash
- 30. DEALING WITH IT 1.handle WebSockets like Flash 2.use encrypted connections 3.detect broken connections 4.disable transports temporarily
- 31. CACHING 1.run full strategy on 1st attempt 2.cache info about best transport 3.use cache on subsequent attempts
- 32. STRATEGIES - RECAP detect browser features cache transport info connect in parallel detect disconnections retry attempts disable transports support delays support timeouts
- 33. IMPLEMENTATION
- 34. SINGLE RESPONSIBILITY PRINCIPLE one decision per strategy simple interface lots different types
- 35. var runner = strategy.connect(function(error, connection) { if (error) { console.log(":("); } else { // we can even get multiple connections console.log("We’ve got a connection!"); } }); // ok, it has been long enough, I’m giving up runner.abort();
- 36. COMPOSING STRATEGIES strategies form trees they can use other strategies decisions are still simple and local
- 37. STRATEGIES 1.transport provides transport to strategy adapter 2.if runs a test and choses another strategy 3.best connected runs in parallel to find best strategy 4.sequential runs strategies sequentially 5.delayed runs a strategy with a delay 6.cached stores and fetches cached transport info 7.first connected terminates a strategy on first connection
- 38. transport ws
- 39. sequential transport ws
- 40. sequential sequential transport transport ws sockjs
- 41. delayed sequential sequential transport transport ws sockjs
- 42. best connected delayed sequential sequential transport transport ws sockjs
- 43. if ws.isSupported() true best connected delayed sequential sequential transport transport ws sockjs
- 44. if ws.isSupported() true false best connected sequential delayed transport sequential sequential sockjs transport transport ws sockjs
- 45. cached if ws.isSupported() true false best connected sequential delayed transport sequential sequential sockjs transport transport ws sockjs
- 46. REPRESENTATION
- 47. REPRESENTATION SHOULD BE 1.understandable by humans 2.easy to read in JavaScript 3.possible to send to clients 4.simple to modify and test
- 48. SENDING JS IS NOT AN OPTION 1.it’s dangerous 2.too expressive 3.difficult to test
- 49. JSON 1.has no side-effects 2.widely supported 3.known by everyone
- 51. DESIRABLE FEATURES 1.ability to define variables 2.passing by reference 3.predictable execution 4.limited expressiveness
- 52. [ [":def", "ws_options", { hostUnencrypted: Pusher.host + ":" + Pusher.ws_port, hostEncrypted: Pusher.host + ":" + Pusher.wss_port, lives: 2 }], [":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 }], [":def_transport", "ws", "ws", 3, ":ws_options"], [":def_transport", "sockjs", "sockjs", 1, ":sockjs_options"], [":def", "ws_loop", [":sequential", ":timeouts", ":ws"]], [":def", "sockjs_loop", [":sequential", ":timeouts", ":sockjs"]], [":def", "strategy", [":cached", 1800000, [":if", [":is_supported", ":ws"], [ ":best_connected_ever", ":ws_loop", [":delayed", 2000, [":sockjs_loop"]] ], [ ":sockjs_loop" ] ]] ] ] ]
- 53. [ [":def", "ws_options", { hostUnencrypted: Pusher.host + ":" + Pusher.ws_port, hostEncrypted: Pusher.host + ":" + Pusher.wss_port, lives: 2 }], [":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 }], [":def_transport", "ws", "ws", 3, ":ws_options"], [":def_transport", "sockjs", "sockjs", 1, ":sockjs_options"], [":def", "ws_loop", [":sequential", ":timeouts", ":ws"]], [":def", "sockjs_loop", [":sequential", ":timeouts", ":sockjs"]], [":def", "strategy", [":cached", 1800000, [":if", [":is_supported", ":ws"], [ ":best_connected_ever", ":ws_loop", [":delayed", 2000, [":sockjs_loop"]] ], [ ":sockjs_loop" ] ]] ] ] ]
- 54. [ [":def", "ws_options", { hostUnencrypted: Pusher.host + ":" + Pusher.ws_port, hostEncrypted: Pusher.host + ":" + Pusher.wss_port, lives: 2 }], [":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 }], [":def_transport", "ws", "ws", 3, ":ws_options"], [":def_transport", "sockjs", "sockjs", 1, ":sockjs_options"], [":def", "ws_loop", [":sequential", ":timeouts", ":ws"]], [":def", "sockjs_loop", [":sequential", ":timeouts", ":sockjs"]], [":def", "strategy", [":cached", 1800000, [":if", [":is_supported", ":ws"], [ ":best_connected_ever", ":ws_loop", [":delayed", 2000, [":sockjs_loop"]] ], [ ":sockjs_loop" ] ]] ] ] ]
- 55. [ [":def", "ws_options", { hostUnencrypted: Pusher.host + ":" + Pusher.ws_port, hostEncrypted: Pusher.host + ":" + Pusher.wss_port, lives: 2 }], [":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 }], [":def_transport", "ws", "ws", 3, ":ws_options"], [":def_transport", "sockjs", "sockjs", 1, ":sockjs_options"], [":def", "ws_loop", [":sequential", ":timeouts", ":ws"]], [":def", "sockjs_loop", [":sequential", ":timeouts", ":sockjs"]], [":def", "strategy", [":cached", 1800000, [":if", [":is_supported", ":ws"], [ ":best_connected_ever", ":ws_loop", [":delayed", 2000, [":sockjs_loop"]] ], [ ":sockjs_loop" ] ]] ] ] ]
- 56. METRICS
- 57. WE COLLECT 1.transport state changes 2.browser name, features 3.some strategy actions
- 58. BETA DEPLOYMENTS 1.deploy a new feature 2.wait for enough data 3.evaluate all metrics 4.keep or revert changes