Real time web (Orbited) at BCNE3

  • 1,199 views
Uploaded on

A short (and not very technical) presentation about using Orbited & Django to make a real-time web application for taking pledges at a conference.

A short (and not very technical) presentation about using Orbited & Django to make a real-time web application for taking pledges at a conference.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,199
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
15
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Real Time Web Or having a socket in your browser Orbited, Django, MorbidQ “ideas2gather” Alex Kavanagh @ajkavanagh [email_address]
  • 2. Back Story
  • 3. There was this journey ...
  • 4. … so I agreed to do it (fairly large mistake)
  • 5. … so I agreed to do it (fairly large mistake)
  • 6. Pre-requisites: Python Javascript IE6 (I know...)
  • 7. What I chose: Orbited & MorbidQ STOMP Django jQuery
  • 8. Orbited – Networking for the web http://orbited.org COMET
  • 9.  
  • 10.  
  • 11. Django: Full Stack Web Framework Python http:www.djangoproject.com
  • 12. STOMP http://stomp.codehaus.org/ The Stomp project is the Streaming Text Orientated Messaging Protocol site (or the Protocol Briefly Known as TTMP and Represented by the symbol :ttmp).
  • 13. jQuery Say no more (makes cross browser javascript work)
  • 14. ideas2gather (A real-time pledging system for Newcastle Council Health and Well-being Partnership event)
  • 15.  
  • 16. Stations machines and A Room display
  • 17. Real-time updates (streaming)
  • 18.  
  • 19. Room Display
  • 20.  
  • 21. Code
  • 22. {% extends &quot;base.html&quot; %} {% block title%}idea2gather - '{{ event.name }}'{% endblock %} {% block script %} <link rel=&quot;stylesheet&quot; href=&quot;/static/css/site-wide.css&quot; type=&quot;text/css&quot; /> <meta name=&quot;channel&quot; content=&quot;/topic/{{ event.key }}&quot; /> <meta name=&quot;javascript-debug&quot; content=&quot;true&quot; /> <meta name=&quot;event-key&quot; content=&quot;{{ event.key}}&quot;/> <script>document.domain=document.domain</script> <script src=&quot;http://{{ orbited_host }}/static/Orbited.js&quot;></script> <script> Orbited.settings.port = 9000; TCPSocket = Orbited.TCPSocket; Orbited.settings.streaming = false; </script> <script src=&quot;http://{{ orbited_host }}/static/protocols/stomp/stomp.js&quot;></script>
  • 23. function setup_stomp(context, params) { // get our connection to the STOMP server var stomp = new STOMPClient(); stomp.onconnectedframe = function() { stomp.ready = true; stomp.subscribe(context.CHANNEL); setTimeout(params.connect_function, 4000); }; // set up the receive function. stomp.onmessageframe = function(frame) { params.receive_function( frame ); }; ...
  • 24. ... var logger = Orbited.getLogger(&quot;example&quot;); var reconnectTimer = null; stomp.onopen = function() { if(reconnectTimer) window.clearTimeout(reconnectTimer); }; stomp.onclose = function(c) { logger.debug('Lost Connection, Code: ' + c); reconnectTimer = window.setTimeout( function () { params.reconnect(context); }, 1000); // TODO: autoincrease with cap }; stomp.connect(document.domain, 61613); //, 'guest', 'guest'); return stomp; }
  • 25. Problems (some)
  • 26. IE (6,7,8) ALL different behaviours
  • 27. References: http://orbited.org/blog/2008/09/integrating-orbited-with-web-app-frameworks/ http://stomp.codehaus.org/ http://www.djangoproject.com http://orbited.org