The document discusses the evolution and significance of real-time web technologies, outlining their historical development and present applications such as notifications, collaboration, and live data. It highlights key technologies including WebSockets, AJAX, and Comet, and emphasizes the transition towards more interactive web experiences. The document also touches on future developments and the potential integration of the Internet of Things.

1. Web Browsers &
the Realtime Web
the past, present & future
Techmeetup Edinburgh ­ 08/02/2012

2. Who is this guy?
Phil Leggetter
www.leggetter.co.uk
@leggetter
Developer Evangelist at Pusher

3. Overview
What is Realtime & the Realtime web
History of browsers & the Realtime web*
What technology can we use now?
Future
Questions
* ­ according to me

4. What is Realtime?
systems that are subject to a "real-time constraint"— e.g. operational
deadlines from event to system response
Source: Wikipedia: Realtime Computing
What is the Realtime web?
The real-time web is a set of technologies and practices that enable
users to receive information as soon as it is published by its authors,
rather than requiring that they or their software check a source
periodically for updates.

5. Source: Wikipedia: Realtime web

6. Publish & Subscribe
+Phil Search Images Videos Maps News Shopping Gmail More
aliens

8. Why the Realtime Web
matters
Opportunity
Convenience
Interaction
Engagement

9. History (according to me)
My first Job = WOW!

12. Java Applets
<PLTCD=ra_iesufcas WDH10
APE OE"eltm_tf.ls" IT=5
HIH=5MYCIT
EGT1 ASRP>
LiveConnect
"Allows Java and JavaScript software to
intercommunicate within a Web page"
Applets were a problem.
Microsoft had to drop support their JVM (were sued).
Sun Microsystems releases kept breaking stuff.

13. Users/Sys admins
didn't want to
install plugins!

14. <frame> Polling
Source

15. <frame> Long­Polling
Source

16. <frame> Streaming
Source

17. XMLHttpRequest
IE5 in 1999 via ActiveX
Slowly but surely adopted by all web browser
Allows
Polling
Long­Polling
Streaming
AJAX term coined in 2005
The term Ajax was coined on 18 February 2005 by
Jesse James Garrett in an article entitled "Ajax: A New
Approach to Web Applications"

18. W3C working draft in 2006
That's how fast technology used to move!

19. Crossdomain restrictions
www.example.com ­> www.example.com √
subdomain.example.com ­> www.example.com
√*
www.example.com ­> www.leggetter.co.uk X**
CORS (Cross Origin Resource Sharing)
Problem: Browser support (FF3.6+, IE8+ etc.)
* you need to set d c m n . o a n
o u e t d m i to be 'example.com'
** there are ways around this with JSONP

20. Comet
Term 'coined' in 2006 by Alex Russell
Comet is a web application model in
which a long-held HTTP request allows a
web server to push data to a browser,
without the browser explicitly requesting
it. Comet is an umbrella term,
encompassing multiple techniques for
achieving this interaction.

22. WebSockets
A protocol and an API
Single bi­directional connection
Supports cross domain communication
vrw =
a s
nwWbokt"s/mwboktevrcm8";
e eSce(w:/yescesre.o:0)
w.npn=fnto( {
sooe ucin)
/ cneto etbihd
/ oncin salse
};
w.nesg =fnto(aa {/ rcieamsae
somsae ucindt) / eev esg
w.ed"e,gt "+dt) / sn amsae
ssn(Yp o: aa; / ed esg
w.ls(;
scoe)
};
w.nls =fnto(v {;
socoe ucine) }
w.nro =fnto( {;/ ?
soerr ucin) } /

24. What can we use now?
HTTP Polling ç
HTTP Long­Polling √ß
HTTP Streaming √
HTML5 WebSockets √*
* ­ See next slide
ß ­ Boo!
Also checkout: http://html5please.us | http://caniuse.com | http://html5readiness.com

25. WebSocket Support
Can use on IE6, IE7, IE8, IE9 and other older
mainstream browsers with web­socket­js Polyfil
Can use on Android with FlashLite or using
Firefox for Android and probably Chrome for
Android.
Source: http://caniuse.com

27. How is this
technology being
used now?

28. Realtime data
Sports, Finance, betting, grids etc.

30. Notifications
Alerts or system
events e.g. long running
process has completed (async
web).
Realtime comments
Activity streams
Live blogging

31. Chat
Probably the No.1 use case

32. Collaboration
Document collaboration and synchronisation

34. Social TV
2nd screen experiences, 2­Screen, Sit forward
TV

36. Multiplayer Games
Game actions
Player/object moves, etc
Game state changes

37. WordSquared

38. WordSquared (Map)

40. Iso City

41. Built on Isogenic Engine

42. Free Civ
Not available anymore ­ don't know why

44. Rawkets

45. Built by Rob Hawkes: Technology Evangelist at Mozilla.

46. Sierra Games

48. Technologies
Self Hosted:
socket.io ­ node.js
SockJS ­ Client library with multiple server options
(node.js/erlang/lua/python)
FAYE ­ node.js/ruby
XSockets ­ .NET
PHP developer? No chance! Well, there are a few options.
Hosted (platform agnostic)
Pusher
There might be others :o)
Full Guide here:
http://www.leggetter.co.uk/real­time­web­technologies­guide

49. The future of Realtime Web
technology
WebSockets
Full native browser support
Not just web browsers
UX considerations
Performance considerations
WebHooks
We still live in a HTTP World
Realtime server to server communication

50. The Internet of Things

51. Arduino's taking over the
World!

53. Questions?/Thanks
I'm putting together a realtime web workshop. If
you are interested in attending please give me a
shout.
Pusher (@pusher) are hiring
http://pusher.com/jobs
Mobile Evangelist, Developer Evangelist, Engineer,
Head of Ops
Phil Leggetter, @leggetter