The Real-Time Web (and Other Buzzwords)

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

0 comments

Post a comment

    Post a comment
    Embed Video
    Edit your comment Cancel

    26 Favorites

    The Real-Time Web (and Other Buzzwords) - Presentation Transcript

    1. Chris Wanstrath http://defunkt.github.com hi everyone, i’m chris wanstrath
    2. i love randy rhoads
    3. and kurt vonnegut
    4. i live in san francisco
    5. and work at github
    6. (which is written in rails)
    7. but! i’m not gonna talk about any of that stuff
    8. today i want to talk about python
    9. and comet (among other things)
    10. the real-time web (And other buzzwords) By Chris Wanstrath this talk is titled “the real-time web (and other buzzwords)”
    11. so what is the “real-time” web? ?
    12. techcrunch and readwriteweb would have you believe it’s a way to get your RSS stories
    13. faster
    14. but is that it?
    15. no.
    16. it’s all about pushing
    17. instead of polling
    18. it’s getting told what’s new !
    19. ? instead of asking for what’s new
    20. instant chat in the browser
    21. and information the moment it’s available
    22. Server Client one persistent connection
    23. Client Server instead of many, short lived connections
    24. right now when we say “real-time web” we usually mean one of three things
    25. comet
    26. flash’s XMLSocket
    27. or HTML5’s WebSocket
    28. let’s start with comet
    29. ? how many people know what comet is? how many people know how it differs from XML socket or WebSocket? good! for a long time i had no idea what comet was
    30. i think it has a big marketing problem. !
    31. see, comet is a cleaning product.
    32. just like ajax
    33. so it’s kind of like,
    34. Me, too! “me too”
    35. I, too, am a revolutionary web technique you didn’t know existed and can start using today that will forever change the way you imagine the web experience. “I, too, am a revolutionary web technique you didn’t know existed and can start using today that will forever change the way you think about the web experience.”
    36. ... and you’re like
    37. Uhh... uh...
    38. AJAX!!!
    39. if i had my way...
    40. i’d call it something else
    41. like maybe asteroid
    42. i dunno, there’s some cool imagery there
    43. i dunno, there’s some cool imagery there
    44. i dunno, there’s some cool imagery there
    45. i dunno, there’s some cool imagery there
    46. i dunno, there’s some cool imagery there
    47. i dunno, there’s some cool imagery there
    48. i dunno, there’s some cool imagery there
    49. anything but comet
    50. anyway, comet is any standards compliant technique which pushes or streams data to the browser over HTTP with comet you can essentially fake a socket connection between a browser and a backend server
    51. how about an example well, for this year’s django dash
    52. me
    53. alex gaynor... whoops...
    54. alex gaynor
    55. and leah culver
    56. ( World’s smallest park ) (seen here next to the world’s smallest park)
    57. built leafychat irc in your browser using comet
    58. you can connect to freenode channels
    59. see who’s online
    60. and do the irc thing right in your browser (demo?)
    61. all without ajax
    62. how? ?
    63. well, there are a few components at play here
    64. Browser first you’ve got the browser (naturally)
    65. Browser Apache 80 then we have apache
    66. Django 8000 Browser Apache 80 sitting behind apache is django (via mod_wsgi or whatever)
    67. Django 8000 Browser Apache 80 the browser hits leafychat.com, port 80, which hits apache. apache sees it’s a django request
    68. Django 8000 Browser Apache 80 and hands off the request.
    69. Django 8000 Browser Apache 80 once django generates a response, apache takes it and delivers it
    70. Django 8000 Browser Apache 80 back to the browser. that’s, more or less, our HTTP request cycle
    71. Browser comet connections work in a similar fashion
    72. Browser Orbited 8100 instead of apache, we have Orbited sitting on port 8100
    73. orbited is an open source, python comet server powered...
    74. by twisted. it does all of the comet heavy-lifting for us
    75. Browser Orbited 8100 so.
    76. Zeddicus 8200 Browser Orbited 8100 sitting behind orbited we have our app-specific comet code. for leafy chat it was a twisted- based daemon named zeddicus. it handled all the IRC stuff - connecting to channels, sending messages, receiving private messages, logging, all that
    77. Orbited 8100 orbited handles generic browser stuff...
    78. Zeddicus 8200 while our app-specific daemon (zeddicus) deals with the business logic. in this case, irc stuff
    79. Zeddicus 8200 Browser Orbited 8100 does this look familiar?
    80. Django 8000 Browser Apache 80 no? ok.
    81. Zeddius Zeddicus 8200 Browser Orbited 8100 anyway, the browser (using orbited’s bundled js library) makes a request...
    82. Zeddius Zeddicus 8200 Browser Orbited 8100 to port 8100. orbited sees it’s a request for zeddicus and hands it off to our backend
    83. Zeddius Zeddicus 8200 Browser Orbited 8100 zeddicus sees a new socket connection open, does some stuff, then writes to the socket
    84. Zeddius Zeddicus 8200 Browser Orbited 8100 orbited reads what zeddicus wrote to the socket connection they share
    85. Zeddius Zeddicus 8200 Browser Orbited 8100 then sends it back the browser via comet
    86. Django 8000 Browser Apache 80 just like before
    87. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <script> // session data var session_nick = "" var session_channels = [] </script> <script type="text/javascript" src="/static/js/soundmanager2/soundmanager2-nodebug-jsmin.js"></script <script type="text/javascript" src="/static/js/audio-player.js"></script> <title>Leafy Chat</title> <link rel="icon" href="/static/img/favicon.ico"/> <link rel="stylesheet" href="/static/css/reset.css" type="text/css" media="screen" /> <link rel="stylesheet" href="/static/css/facebox.css" type="text/css" media="screen/> <link rel="stylesheet" href="/static/css/base.css" type="text/css" media="screen" /> <script> document.domain = document.domain; </script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"> <script type="text/javascript" src="http://leafychat.com:8100/static/Orbited.js"></script> <script type="text/javascript" src="/static/js/facebox.js" charset="utf-8"></script> <script type="text/javascript" src="/static/js/cookie.js" charset="utf-8"></script> <script type="text/javascript" src="/static/js/leafy.js" charset="utf-8"></script> <script type="text/javascript" src="/static/js/kahlan.js" charset="utf-8"></script> <div id="main"> <div id="header"> <div id="navigation" class="rounded"> <ul class="nav-list"> <!-- this should be a list --> <li>Hi <span id="welcome-user">there</span>!</li> but while apache and django deal with html
    88. Zeddius Zeddicus 8200 Browser Orbited 8100 zeddicus, our back-end daemon, concerns itself only...
    89. with json. orbited supports STOMP, XMPP, and raw IRC, too, but JSON is the way to go. why do i say that?
    90. well, unfortunately this is where orbited does not rock
    91. orbited only cares about giving you a socket, you have to do everything else yourself. that’s the deal
    92. so you need to design your own protocol...
    93. how it interacts with your back-end daemon
    94. how events are fired and responded to
    95. all that boring stuff
    96. we ended up using a combination of django signals and json
    97. Zeddius Zeddicus 8200 Browser Orbited 8100 so this is our overview, except with one small change
    98. Zeddius Zeddicus 8200 Browser Orbited 8100 these are actually persistent connections
    99. Zeddius Zeddicus 8200 Browser Orbited 8100 between orbited and zeddicus it’s a tcpsocket
    100. Zeddius Zeddicus 8200 Browser Orbited 8100 between the browser and orbited it’s a comet technique
    101. Zeddicus Browser 8200 we jump through all these hoops because it allows us to write our app as if the browser is connecting DIRECTLY to zeddicus via a tcpsocket
    102. Zeddicus Browser 8200 which is what the “real time” web is all about and what comet gives us the browser writes to and reads from a socket, our back-end daemon does the same.
    103. fast communication
    104. Zeddius Zeddicus 8200 Browser Orbited 8100 alright, so let’s talk about this part a bit more the comet part
    105. Zeddius Zeddicus 8200 Browser Orbited 8100 there are a few different ways to fake a persistent connection to a server with modern browsers
    106. xhr long polling - hang an xhr request until we get a response or 30s, then re-open and wait again
    107. <script> script tag long polling - dynamically create a script tag pointing to a url that hangs or times out, rinse and repeat
    108. <iframe> forever frame - open a Content-Encoded: chunked url in an iframe, each chunk is a <script> tag that runs
    109. xhr streaming - set content-encoding: chunked and trigger onreadystate callback with each chunk
    110. so now you know our white lie: we don’t have real persistence, or a real socket. we fake it at both ends.
    111. or, really, orbited fakes it at both ends
    112. all that to get irc in your browser
    113. well, kinda
    114. Zeddius freenode Zeddicus 8200 6667 Browser Orbited 8100 see, with orbited, you can connect directly to an irc server and why not? it’s just a socket connection
    115. in fact you can demo a (somewhat functional) irc connection on the orbited website
    116. Zeddius Zeddicus 8200 Browser Orbited 8100 Zeddius freenode Zeddicus 8200 6667 but with leafychat we wrote our own backend daemon that connected to irc. why?
    117. logging.
    118. Zeddius Zeddicus 8200 Browser Orbited 8100 if we loaded our django code into zeddicus, we could easily log irc chats you’re interested in based on your session id. it works very well.
    119. Django Orbited 8000 Browser Apache 80 Zeddius 8200 at this point i should mention the older tutorials online explaining how to load orbited into django.
    120. Apache Django 80 8000 Browser Orbited Zeddicus 8100 8200 but i the best (and simplest) way is to let each component be its own daemon it works great for production as well as dev mode - the django dash judges were able to start and run our app locally, despite the number of daemons that needed to run
    121. if you want to get a comet app up and running locally, check out orbited it supports a ton of comet transports and is actively maintained
    122. using java? jetty has comet support
    123. the ruby world has juggernaut
    124. while perl has meteor
    125. there’s the interesting in-progress Ajax Push Engine
    126. and in erlang there’s erlycomet (built on mochiweb)
    127. so, flash’s XMLSocket
    128. Zeddius Zeddicus 8200 Browser Orbited 8100 it turns this
    129. Zeddicus Browser 8200 into this
    130. how? flash allows you to make tcp connections in actionscript. by providing a javascript api to those tcp connections, we can use flash to create persistent, socket connections from the browser
    131. no lying needed
    132. of course, it may be non-standard and might not work great across firewalls. but if you can use it, it’s pretty great
    133. a popular technique is to attempt to open a flash socket, then fall back to standards based comet methods if it fails it’s good backup
    134. there are a few nice libraries for xml socket on github
    135. tmm1 / jssocket my favorite is tmm1’s jssocket
    136. defunkt / jssocket (i have a fork which removes the jquery dependencies)
    137. finally: HTML5’s WebSocket
    138. it’s still a proposed draft but it’ll let you open a socket to any serve that speaks the special WebSocket protocol
    139. ws:// servers need to speak the WebSocket protocol - you can’t open arbitrary connections to irc or xmpp gateways this plugs up the obvious security holes but also makes it a bit harder to implement than something like XMLSocket your server needs to speak ws
    140. so, in review ?
    141. comet
    142. should be called asteroid
    143. flash’s XMLSocket
    144. is non-standard but nice
    145. HTML5’s WebSocket
    146. not yet here but futuristic
    147. you should give orbited a shot
    148. with json
    149. 0 probably null terminated
    150. Django Orbited 8000 don’t load orbited in django
    151. Orbited 8100 use them alongside each other
    152. is that it? ?
    153. that’s it !
    154. Thank You
    155. http://www.flickr.com/photos/mojombo/3785549701/sizes/l/ http://www.flickr.com/photos/voteprime/2361330726/sizes/o/ http://www.flickr.com/photos/johnkerr/2371310025/sizes/l/ http://www.flickr.com/photos/h19/182898904/ http://www.flickr.com/photos/ukinindia/3595042998/sizes/l/ http://www.flickr.com/photos/scott1027/3189137578/sizes/l/ http://www.flickr.com/photos/foxypar4/2124673642/sizes/l/ http://www.flickr.com/photos/nickwheeleroz/2166114756/sizes/l/ http://www.flickr.com/photos/nickwheeleroz/2178146080/sizes/l/ http://www.flickr.com/photos/diyromarcade/3006368260/sizes/o/ http://www.flickr.com/photos/boopsiedaisy/3611187885/sizes/o/ http://www.flickr.com/photos/bastispicks/2834869959/sizes/l/ http://www.flickr.com/photos/courtenay/2536259393/sizes/l/ http://www.flickr.com/photos/jardinle/3335907363/sizes/o/ http://www.flickr.com/photos/tim-miley/3569809538/ http://www.flickr.com/photos/dexterousartisan/3209508363/sizes/l/ http://www.flickr.com/photos/equanimity/3763158824/sizes/l/ http://www.flickr.com/photos/24617281@N04/2329660856/sizes/o/ http://farm4.static.flickr.com/3555/3767120120_8f43f885e1.jpg http://www.flickr.com/photos/raffaella/64701476/ http://www.flickr.com/photos/monicareyes/405402858/sizes/o/ http://www.flickr.com/photos/11016633@N07/2232831953/ flickr

    + errerr, 2 months ago

    custom

    5666 views, 26 favs, 13 embeds more stats

    More info about this document

    © All Rights Reserved

    Go to text version

    • Total Views 5666
      • 4632 on SlideShare
      • 1034 from embeds
    • Comments 0
    • Favorites 26
    • Downloads 166
    Most viewed embeds
    • 994 views on http://blog.leahculver.com
    • 15 views on http://dancroak.com
    • 9 views on http://alessandrofontana.wordpress.com
    • 5 views on https://trillr.coremedia.com
    • 2 views on http://leahculver.com

    more

    All embeds
    • 994 views on http://blog.leahculver.com
    • 15 views on http://dancroak.com
    • 9 views on http://alessandrofontana.wordpress.com
    • 5 views on https://trillr.coremedia.com
    • 2 views on http://leahculver.com
    • 2 views on http://leahculver.typepad.com
    • 1 views on http://static.slidesharecdn.com
    • 1 views on http://posterous.com
    • 1 views on http://www.iweb34.com
    • 1 views on http://fever.id43.net
    • 1 views on http://www.leahculver.com
    • 1 views on http://fever.andrlik.org
    • 1 views on http://www.totanus.net

    less

    Flagged as inappropriate Flag as inappropriate
    Flag as inappropriate

    Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

    Cancel
    File a copyright complaint
    Having problems? Go to our helpdesk?

    Categories