Your SlideShare is downloading. ×
Get Real: Adventures in realtime web apps
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Get Real: Adventures in realtime web apps


Published on

A presentation at High Ed Web 2012 conference in Milwaukee on available techniques for adding real time features to web applications.

A presentation at High Ed Web 2012 conference in Milwaukee on available techniques for adding real time features to web applications.

Published in: Technology

  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Adventures in real-time web applicationsGet Real!
  • 2. Real time?• In a real time application, all participantsreceive content as soon as it is authored.
  • 3. Party line
  • 4. IRC
  • 5. World of Warcraft
  • 6. Real time is...• Synchronous• Social (sometimes)• Collaborative• Messy
  • 7. Dispatched and Controlled
  • 8. Real time web• Any real time application that is accessedvia a web browser
  • 9. Facebook
  • 10. Twitter
  • 11. EBS
  • 12. • Gmail and Chat• Google docs• Any real-time feed(news, stocks, weather,class availability in registration system,Lady Gaga’s Twitter feed)• WebEx, GoTo Meeting, Adobe Connect,etc. (??)Others
  • 13. Building real time webapps is challenging• HTTP is stateless• Request / Response is its favorite song• Simulating ongoing connection is expensive• People still use IE
  • 14. or“The Wall”is the“Hello,World!”of real time web programming.of real time web programming.of real time web programming.of real time web programming.of real time web programming.
  • 15. Hello,Wall!• Anything typed by anyone is seen byeveryone.• Simply showing up on the page allows youto start participating.• Very low barrier to entry.
  • 16. • Participants’ messages go to the dispatcher• Participants need to get new messages• Everyone has their own copy of the wall
  • 17. How do people receivechanges to the wall?• They could ask for them• They could wait until someone calls• But how do you call a browser?• or appear to call
  • 18. What are the options?
  • 19. • Polling• Long polling• Hanging GET / infinite (forever) iFrame• Flash Real Time Messaging Protocol (RTMP)• Web sockets• Server Sent Events (SSE)
  • 20. • If all you’ve got is HTTP . . .• Everything looks like a Request / Response• This (anti)pattern is probably the mostcommon unexamined choice for keeping upwith status.Polling
  • 21. Polling
  • 22. setInterval( function ( ) {var server = ‘’;$.ajax({ url: server, data: {action: ‘getMessages’},success: function(data) {//Update the wallchatFunctions.writeWall(data.value);}, dataType: ‘json’});}, 30000);Polling
  • 23. • AKAThe long-held connection• Server programming waits to answer untilit has a meaningful answer• The client either receives an event or timesout• A new connection is established immdiatelyLong Polling
  • 24. Long Polling
  • 25. (function poll() {var server = ‘’;$.ajax({ url: server, data: {action: ‘getMessages’},success: function(data) {//Update the wallchatFunctions.writeWall(data.value);}, dataType: "json", complete: poll });})();Long polling
  • 26. • The closest thing to a continuousconnection that HTTP may have to offer• Leverages the fact that HTTP requests thatreturn chunked data do not need toaccurately report their size• Unreliable support in IE• A HACK!Hanging GET orinfinite iFrameinfinite iFrame
  • 27. Infinite iFrame
  • 28. <iframe src=""style=”position: absolute; left: -9999px;”><p>Your browser does not support iFrames.</p></iframe>endless.html:HTTP/1.1 200 OKContent-Type: text/plainTransfer-Encoding: chunked23<script>chatFunctions.writeToWall(‘Jane Bell: Anyone here yet’);</script>1A<script>chatFunctions.writeToWall(‘Aurora Smyth: Just got here. Hi!’);</script>...The infinite iFrame
  • 29. • Client-side Flash object establishes statefuland persistent connection with server• Web page communicates via Javascript toand from the Flash object• Proprietary but fairly robustFlash RTMP
  • 30. script type=text/javascript src=realTimeLib.js></script>div id=”wall”></div>form><input type=”text” id=msg /><input type=”submit” id=”send” value=”Send” />/form>script type="text/javascript">rtl = new realTimeLib();rtl.setup({RTMPrelay: RTMPrelay.swf});$(“#send”).click( function() {rtl.send($(“#msg”).value());});function postToWall(data) {// This function is called by rtl object’s swf when it receives a new post$(“#wall”).append(data);}/script>Flash RTMP
  • 31. The story so far• All of these techniques are work-aroundsand compromises• Leverage side-effects of HTTP protocol andbrowser implementations• I.E. - not based on standards• (except Flash RMTP, which has beenpartially open-sourced by Adobe)
  • 32. Web Sockets• Web sockets is a proposal for a standardthat strives to solve the problem of server-initiated messages to clients• IETF RFC 6455• In standards process at W3C• Already old hat
  • 33. Another channel• Web Sockets work by requesting anupgrade via a standard HTTP request• The protocol gets changed to Web Socket,which is a stateful TCP connection overanother port (often 443)• Both client and server code then listens forevents on the channel and respondsaccordingly.
  • 34. Web socketsare good listenersare good listenersvar ws = new WebSocket("ws://");ws.onopen = function() {ws.send("{‘user’:‘David’}");}ws.onNewWallPost = function (evt) {var received_msg = chatFunctions.parseServerEvt(;chatFunctions.writeWall(;}$(“#sendBtn”).click(function() {ws.send($(“#msgField”).value());}
  • 35. Look familiar?
  • 36. Ecapsulated and abstractedgraceful degradation• Several libraries exist that enableabstracted real time messaging• They use the best technology available tothe client and fail over to the next best ifits missing• Use Web Sockets, Flash, long polling,or forever iFrame, in that order
  • 37. Server side• Node.js has become a very popular serverside implementation language• It’s non-blocking and has a native event-driven processing model• It also lends itself to elegant symmetriesbetween server and client side code
  • 38. Server side• Juggernaut,WebSocket-Node and Socket.IO arewell tested Node libraries• Socket.IO seems most mature and well maintained• hosts Node that you write• Any framework that offers request routing workswell• Ruby has EM-WebSocket, Socket.IO-rack, Cramp,or just plain old Sinatra
  • 39. Server side• There are also services that take care ofthe server for you and let you get startedbuilding apps right away.• is probably the most visible,and maybe the most mature.• is an interesting new-comer
  • 40. Socket.IO Example
  • 41. /app.jsar app = require(http).createServer(handler), io = require(, fs = require(fs)pp.listen(80);unction handler (req, res) {fs.readFile(__dirname + /index.html,function (err, data) {if (err) {res.writeHead(500);return res.end(Error loading index.html);}res.writeHead(200);res.end(data);});o.sockets.on(connection, function (socket) {socket.on(set_nickname, function (data) {socket.set(nickname, data, function () {socket.emit(ready, data);});});socket.on(post, function (data) {var tmpName = "";socket.get(nickname, function (err, data) {tmpName = data;});socket.broadcast.emit(share, <p><strong> + tmpName + :</strong> + data.msg + </p>);socket.emit(share, <p><strong>(me):</strong> + data.msg + </p>);}););
  • 42. !doctype html>html><head><meta charset="utf-8"><meta charset=utf-8><title>Real time chat example</title></head><body><h1>Hello Chat!</h1><form id="getNickName"><label for="nickname">Choose a nickname </label><input type="text" name="nickname"><input type="submit" name="setNickname" value="Set it!"></form></body><script type="text/javascript" src="/"></script><script type="text/javascript"src="//"></script><script type="text/javascript"src="//"></script><script id="wallControl" type="text/x-handlebars-template"><p>User Nickname: {{userNickName}}</p><div class="wall" /><form><input type="text" name="msg" /><input type="submit" name="send" value="send"></form></script>
  • 43. <script type="text/javascript">$(document).ready( function() {var socket = io.connect(/);$("[name=setNickname]").click(function(event) {event.preventDefault();socket.emit("set_nickname", $("[name=nickname]").val());$("body").append(theWall);});socket.on(ready, function (data) {var theWall = Handlebars.compile($("#wallControl").html());theWall = theWall({userNickName: data});$("#getNickName").remove();$("body").append(theWall);});$("[name=send]").live("click", function(event) {socket.emit("post", { msg: $("[name=msg]").val() });$("[name=msg]").val("");event.preventDefault();});socket.on(share, function (data) {$(".wall").append(data);});});</script></html>
  • 44. div class="image"><div id="canvasDiv"></div>/div>p class="demoToolList"><button id="clearCanvas" type="button">Clear</button></p>unction addClick(x, y, dragging, broadcast) {clickX.push(x);clickY.push(y);clickDrag.push(dragging);if (broadcast) {socket.emit("addClick", {x: x, y: y, dragging: dragging});}ocket.on(reAddClick, function (data) {addClick(data.x, data.y, data.dragging, false););unction redraw(click_x, click_y, click_drag, broadcast) {clickX = click_x;clickY = click_y;clickDrag = clickDrag;if (broadcast) {socket.emit("redraw", {clickX: click_x, clickY: click_y, clickDrag: click_drag});}canvas.width = canvas.width; // Clears the canvascontext.strokeStyle = "#df4b26";context.lineJoin = "round";context.lineWidth = 5;for(var i=0; i < click_x.length; i++) {context.beginPath();if(click_drag[i] && i){context.moveTo(click_x[i-1], click_y[i-1]);}else{context.moveTo(click_x[i]-1, click_y[i]);}context.lineTo(click_x[i], click_y[i]);context.closePath();context.stroke();}ocket.on(reredraw, function (data) {redraw(data.clickX, data.clickY, data.clickDrag, false););
  • 45. More feature ideas easilysupported by Socket.IO• Person to person IM sessions• Chat rooms• “Volatile” messages• Blocking users• Namespaces to multiplex single connections
  • 46. Some things are server-sent
  • 47. Server-Sent Events(SSE)• Web Hypertext Application Technology Working Group(WHATWG)• Opera was first to provide support in 2006• Simpler messaging protocol• No need to upgrade connection - Runs on HTTP/80• All browsers now support SSE in their current versions• Except IE (except with EventSource.js polyfill)
  • 48. // Client-side Javascriptvar source = new EventSource(/stream);source.addEventListener(message, function(e){console.log(Received a message:,;});# Server-side solution using Sinatraget /stream, :provides => text/event-stream dostream :keep_open do |out|connections << outout.callback { connections.delete(out) }endendpost / doconnections.each { |out| out << "data: #{params[:msg]}nn" }204 # response without entity bodyend
  • 49. David