DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
Ā
Going Live! with Comet
1. Going Live! with Comet
Simon Willison - http://simonwillison.net/
SkillSwap Brighton, 11th June 2008
Header image: http://svn.xantus.org/shortbus/trunk/cometd-perl/html/
2.
3. Live data on the Web
ā¢ A new frontier for web apps
ā¢ Chat, everywhere - Meebo, Facebook, GChat...
ā¢ Twitter (well, it would be nice if it was live)
ā¢ Life-casting, live video
ā¢ Collaboration tools
ā¢ Push, not Pull
24. Netscape 1.1 new features
ā¢ Tables
ā¢ Background images
ā¢ āDynamic Documentsā
25. Netscape 1.1 new features
ā¢ Tables
ā¢ Background images
ā¢ āDynamic Documentsā
ā¢ Client Pull
26. Netscape 1.1 new features
ā¢ Tables
ā¢ Background images
ā¢ āDynamic Documentsā
ā¢ Client Pull
ā¢ Server Push
27. Netscape 1.1 new features
ā¢ Tables
ā¢ Background images
ā¢ āDynamic Documentsā
ā¢ Client Pull
ā¢ Server Push
ā¢ Predates JavaScript, Internet Explorer and Flash
40. A hidden iframe
(The forever frame technique)
ā¢ Add a hidden iframe pointing at a streaming
page
ā¢ Send down chunks of <script> blocks, which
the browser will execute as part of
progressive rendering
ā¢ Add 1KB of junk at the start to trigger
progressive rendering in IE
42. Problem #2
The throbber!
Problem #3 The click!
43. Solved for GChat
var htmlfile = new ActiveXObject('htmlfile');
ā¢ An undocumented ActiveX extension
ā¢ Create an quot;htmlļ¬lequot; instance
ā¢ Create an iframe inside it
ā¢ Set up some cross-frame scripting hooks
ā¢ Run comet using the iframe
ā¢ No clicks! No throbber!
44. Confuse IE with enough nested
iframes and it forgets to click
Huh?
47. Long polling
ā¢ Make a request (iframe, XHR or even a <script> tag)
ā¢ Server pretends to be processing it really slowly...
ā¢ An event occurs; the server ļ¬nally returns the response
ā¢ The browser starts a new request straight away
49. ā¢ mysite.com - regular site
ā¢ comet.mysite.com - comet server
ā¢ Cross-domain communication is easy - just add
another iframe and set document.domain to
enable cross-frame scripting
ā¢ (Then solve the resulting browser history
problems with a few more iframes)
ā¢ Facebook go a step further and use incrementing
subdomains for every request
50. ā¢ mysite.com - regular site
ā¢ comet.mysite.com - comet server
ā¢ Cross-domain communication is easy - just add
another iframe and set document.domain to
enable cross-frame scripting
ā¢ (Then solve the resulting browser history
problems with a few more iframes)
ā¢ Facebook go a step further and use incrementing
subdomains for every request
51. ā¢ mysite.com - regular site
ā¢ comet.mysite.com - comet server
ā¢ Cross-domain communication is easy - just add
another iframe and set document.domain to
enable cross-frame scripting
ā¢ (Then solve the resulting browser history
problems with a few more iframes)
ā¢ Facebook go a step further and use incrementing
subdomains for every request
60. Scaling the server
http://ļ¬ickr.com/photos/adrianblack/254968866/ craig1black
61. ā¢ Comet requires potentially tens of
thousands of simultaneous HTTP
connections
ā¢ Apache and other mainstream servers are
designed to handle a single request as
quickly as possible
ā¢ Requests are generally served by a worker
process or thread
ā¢ This absolutely will not scale to Comet
62. Event-based IO
ā¢ Alternative architecture designed to handle
thousands of simultaneous connections
ā¢ Twisted (Python)
ā¢ Jetty (Java)
ā¢ Perlbal
ā¢ Orbited
ā¢ Meteor
ā¢ Facebook used MochiWeb (in Erlang)
64. Bayeaux
ā¢ Bayeaux is a protocol for Comet
ā¢ Any Bayeaux client can talk to any Bayeaux server
ā¢ The protocol is based on clients publishing and
subscribing to channels
ā¢ Data is encoded using JSON
ā¢ Clients can create a permanent connection using a
handshake, or send simple one-off messages
65. Dumb Comet servers
ā¢ The principle advantage of Bayeaux is that
your Comet server can be stupid - it
doesnāt need any application logic, it just
needs to route messages around
ā¢ Itās a black box which you simply drop in
to your architecture
ā¢ This means your application logic can stay on
your favourite platform
66. Cometd
ā¢ Cometd (Comet Daemon) is an umbrella
project for a number of Bayeaux
implementations
ā¢ cometd-python (in Twisted)
ā¢ cometd-perl (also a Perlbal plugin)
ā¢ cometd-java (on Jetty)
ā¢ dojox.cometd (JavaScript client)
ā¢ http://cometd.com/
67. So despite all of that...
Comet applications
are easy to build
69. Set up Jetty
ā¢ Download and unzip Jetty-6.1 from www.mortbay.org
ā¢ Install Maven from http://maven.apache.org/
ā¢ cd jetty-6.1.6/contrib/cometd/demo/
ā¢ mvn jetty:run
ā¢ Browse to http://localhost:8080/
ā¢ Mess around with the JS in src/main/webapp/examples/
72. A slideshow in 5 lines of code
<script type=quot;text/javascriptquot;>
dojo.require(quot;dojox.cometdquot;);
jQuery(function($) {
dojox.cometd.init(quot;http://127.0.0.1:8080/cometdquot;);
dojox.cometd.subscribe(quot;/slideshow/changequot;, function(comet) {
$('#currentSlide').attr('src', comet.data.src);
});
});
</script>
73. Conclusions
ā¢ Comet is possible, therefore itās inevitable
ā¢ It requires hacks, but theyāre reasonably well
abstracted and understood
ā¢ Bayeaux and Cometd abstract away the
nastiness and make Comet accessible to
sane developers