Presentation by Pawel Ledwon at the 1st XMPP / Realtime Meetup

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

13. TRANSPORT
a type of
connection

14. DIFFERENT TRANSPORTS
WebSockets
Flash
HTTP-based
(SSL/Non-SSL)

15. TRANSPORT CLASS
Transport.connect(url)
...

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

21. TRANSPORT CLASS
Transport.connect(url)
Transport.isSupported()

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

50. JSON
needs an interpreter

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

59. THANKS!
@pawel_ledwon