Real time web (Orbited) at BCNE3

1,399 views

Published 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.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,399
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
17
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Real time web (Orbited) at BCNE3

  1. 1. Real Time Web Or having a socket in your browser Orbited, Django, MorbidQ “ideas2gather” Alex Kavanagh @ajkavanagh [email_address]
  2. 2. Back Story
  3. 3. There was this journey ...
  4. 4. … so I agreed to do it (fairly large mistake)
  5. 5. … so I agreed to do it (fairly large mistake)
  6. 6. Pre-requisites: Python Javascript IE6 (I know...)
  7. 7. What I chose: Orbited & MorbidQ STOMP Django jQuery
  8. 8. Orbited – Networking for the web http://orbited.org COMET
  9. 11. Django: Full Stack Web Framework Python http:www.djangoproject.com
  10. 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).
  11. 13. jQuery Say no more (makes cross browser javascript work)
  12. 14. ideas2gather (A real-time pledging system for Newcastle Council Health and Well-being Partnership event)
  13. 16. Stations machines and A Room display
  14. 17. Real-time updates (streaming)
  15. 19. Room Display
  16. 21. Code
  17. 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>
  18. 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 ); }; ...
  19. 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; }
  20. 25. Problems (some)
  21. 26. IE (6,7,8) ALL different behaviours
  22. 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

×