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

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

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)

16. Stations machines and A Room display

17. Real-time updates (streaming)

19. Room Display

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