This document discusses the history and current state of real-time web technologies. It describes older methods like comet that used polling to enable real-time updates. WebSockets were presented as an improvement, being bidirectional, persistent, and lightweight, but have issues like lack of full browser support. The document recommends using Socket.io, which creates a hybrid system that uses multiple transport methods including WebSockets, polling, and flash to provide real-time capabilities across all browsers.

1. pushing the web forward
socket.io
with
Friday, April 6, 12

2. who am i
a socket.io core developer
winner node knockout 2011
early node user since 0.1.3
founder observe.it
Friday, April 6, 12

3. github @3rd-eden
&
@3rdeden
twitter
Friday, April 6, 12

4. i the state of real-time
ii socket.io
iii socket.io next
Friday, April 6, 12

5. the state of real-time
Friday, April 6, 12

6. the past
Friday, April 6, 12

7. the past
comet, polling and other methods to abuse the web
can i has data
browser server
Friday, April 6, 12

8. the past
comet, polling and other methods to abuse the web
can i has data
nope, dun has dataz ;(
browser server
Friday, April 6, 12

9. the past
comet, polling and other methods to abuse the web
can i has data
nope, dun has dataz ;(
can i has data pretty plx
browser server
Friday, April 6, 12

10. the past
comet, polling and other methods to abuse the web
can i has data
nope, dun has dataz ;(
can i has data pretty plx
yes, i has ur dataz
browser server
Friday, April 6, 12

11. the past
comet, polling and other methods to abuse the web
can i has data
nope, dun has dataz ;(
can i has data pretty plx
yes, i has ur dataz
ohi can i has dataz
browser server
Friday, April 6, 12

12. the past
used transport methods
XHR & JSONP polling
can be used cross domain, JSONP connections usually use
an iframe to post messages
Friday, April 6, 12

13. the past
used transport methods
iFrame / HTMLFile streaming
HTMLFile is used to hide the loading indicators as the connection with server is
never closed so it can stream in new messages
Friday, April 6, 12

14. the past
used transport methods
Plugins, Java, Flash, Silverlight
everybody has this awesome bloatware installed
Friday, April 6, 12

15. the past
used transport methods
EventSource and multipart XHR
EventSource was actually implemented in opera 9 and combined with XHR
multi-part from firefox we got two good streaming read only solutions
Friday, April 6, 12

16. the past
used transport methods
window.name
used to create cross-domain browser transport, first used in Dojo
Friday, April 6, 12

17. HTML5 the future
Friday, April 6, 12

18. websockets
the good parts ™
Friday, April 6, 12

19. ™ the good parts ™
Bidirectional
Friday, April 6, 12

20. ™ the good parts ™
Bidirectional
Persistent
Friday, April 6, 12

21. ™ the good parts ™
Bidirectional
Persistent
Light weight
Friday, April 6, 12

22. ™ the good parts ™
Bidirectional
Persistent
Light weight
Blazing fast
Friday, April 6, 12

23. websockets
the bad parts ™
Friday, April 6, 12

24. ™ the bad parts ™
No full browser coverage
Friday, April 6, 12

25. ™ the bad parts ™
No full browser coverage
Browser issues
Friday, April 6, 12

26. ™ the bad parts ™
No full browser coverage
Browser issues
Connection blockage
Friday, April 6, 12

27. ™ the bad parts ™
No full browser coverage
Browser issues
Connection blockage
Bad server HTTP proxy support
Friday, April 6, 12

28. ™ the bad parts ™
no full browser support yet
16+ 8+ 11.6+ 5+ 10+
RFC RFC HIXIE HIXIE RFC
Friday, April 6, 12

29. ™ the bad parts ™
browser issues
Friday, April 6, 12

30. ™ the bad parts ™
browser issues
Usage or detecting a HTTP proxy
(AutoProxyDiscovery) crashes < Safari 5.1.4
and Mobile Webkit
your fucked or use user agent sniffing
Friday, April 6, 12

31. ™ the bad parts ™
browser issues
Writing to a closed WebSocket connection
can crash the browser & tabs
check for connection state with a setTimeout
Friday, April 6, 12

32. ™ the bad parts ™
browser issues
3G connections can crash WebSocket
fucked, again, disable websockets on portable devices, until netinfo API is
supported
Friday, April 6, 12

33. ™ the bad parts ™
browser issues
Pressing ESC in Firefox will drop the
established connection. Even after the page
has fully loaded.
capture the event early and try to cancel it
Friday, April 6, 12

34. ™ the bad parts ™
browser issues
Sending invalid UTF-8 drops the connection
escape & encodeURI your data
Friday, April 6, 12

35. ™ the bad parts ™
browser issues
TCP socket leaks in Chrome if you get
disconnected from the internet
you’re fucked, no way to detect
Friday, April 6, 12

36. ™ the bad parts ™
browser issues
Firefox doesn’t connect to ws:// from a secure
https page.
can be detected <3!
Friday, April 6, 12

37. ™ the bad parts ™
connection blockage
firewall
browser anti-virus server
plugins
Friday, April 6, 12

38. ™ the bad parts ™
connection blockage
3% of all requests on port 4000
were blocked
out of the unique 100k connections tested
enterprise proxies usually block
everything except port 80,443,843
and virus scanners usually target port 80 for scanning & blocking
Friday, April 6, 12

39. Friday, April 6, 12

40. ™ the bad parts ™
connection blockage
to minimize the impact use SSL by
default
if this is not possible fallback from
different ports
4000 843 80
Friday, April 6, 12

41. go hybrid
Friday, April 6, 12

42. socket.io
Friday, April 6, 12

43. socket.io
Full hybrid real time server
blurring the differences between transport methods
100% JavaScript
powered by Node.js <3, npm install socket.io and your done, but it’s also ported
to different languages
Open Souce MIT license
github.com/LearnBoost/socket.io(-client)
Friday, April 6, 12

44. socket.io
Comes with tons of features
encoding, multiplexing, heartbeats, authentication, scaling
Friday, April 6, 12

45. socket.io
high performance, lower is better
Google Chrome 16
x
ws
Friday, April 6, 12

46. socket.io
autobahn testsuite
ws
Friday, April 6, 12

47. socket.io
how does it work
visitor socket.io
Friday, April 6, 12

48. socket.io
how does it work
handshake request
visitor socket.io
Friday, April 6, 12

49. socket.io
how does it work
accepted transports, connection id and
config is returned
handshake accepted
visitor socket.io
Friday, April 6, 12

50. socket.io
how does it work
feature detection is used to find a
working transport layer
visitor socket.io
Friday, April 6, 12

51. socket.io
supported transport methods
Web Socket HIXIE 75/76 HIBI
Friday, April 6, 12

52. socket.io
supported transport methods
Web Socket HIXIE 75/76 HIBI
Flash Socket FLASH 10+
Friday, April 6, 12

53. socket.io
supported transport methods
Web Socket HIXIE 75/76 HIBI
Flash Socket FLASH 10+
HTML File IE 5.5+
Friday, April 6, 12

54. socket.io
supported transport methods
Web Socket HIXIE 75/76 HIBI
Flash Socket FLASH 10+
HTML File IE 5.5+
XHR Polling IE6,FF,OPERA,WEBKIT
Friday, April 6, 12

55. socket.io
supported transport methods
Web Socket HIXIE 75/76 HIBI
Flash Socket FLASH 10+
HTML File IE 5.5+
XHR Polling IE6,FF,OPERA,WEBKIT
JSONP Polling EVERYONE
Friday, April 6, 12

56. socket.io
how does it work
real time connection is
established with the server
visitor using the transport socket.io
Friday, April 6, 12

57. socket.io
how does it work
heartbeats are send to
ensure proper connection
visitor socket.io
Friday, April 6, 12

58. live
CODING
Friday, April 6, 12

59. socket.io next
a.k.a
engine.io & websocket.io
Friday, April 6, 12

60. engine.io & websocket.io
Transport upgrading instead of downgrading
faster connection times, less prone to errors
Friday, April 6, 12

61. engine.io & websocket.io
Transport upgrading instead of downgrading
faster connection times, less prone to errors
Smaller because theres no sugar on top
and transports can be lazy loaded
Friday, April 6, 12

62. engine.io & websocket.io
Transport upgrading instead of downgrading
faster connection times, less prone to errors
Smaller because theres no sugar on top
and transports can be lazy loaded
WebSocket only interface
for those of your who think websockets are good enough, but you really shouldn’t
Friday, April 6, 12

63. Q&Awill be answered in real time
talk nerdy to me
Friday, April 6, 12

64. github @3rd-eden
&
@3rdeden
twitter
Friday, April 6, 12