Real Time Web

Or having a socket in your browserOrbited, Django, MorbidQ

“ideas2gather”

Alex Kavanagh@ajkavanagh

alex@ajkavanagh.co.uk

Back Story

There was this journey ...

… so I agreed to do it

(fairly large mistake)

… so I agreed to do it

(fairly large mistake)

Pre-requisites:Python

JavascriptIE6 (I know...)

What I chose:Orbited & MorbidQ

STOMPDjangojQuery

Orbited – Networking for the webhttp://orbited.org

COMET

Django:Full Stack Web Framework

Pythonhttp:www.djangoproject.com

STOMPhttp://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).

jQuery

Say no more(makes cross browser javascript work)

ideas2gather

(A real-time pledging system for Newcastle Council Health and Well-being Partnership event)

Stations machines

and

A Room display

Real-time updates(streaming)

Room Display

Code

{% extends "base.html" %}{% block title%}idea2gather - '{{ event.name }}'{% endblock %}{% block script %}<link rel="stylesheet" href="/static/css/site-wide.css" type="text/css" /><meta name="channel" content="/topic/{{ event.key }}" /><meta name="javascript-debug" content="true" /><meta name="event-key" content="{{ event.key}}"/><script>document.domain=document.domain</script><script src="http://{{ orbited_host }}/static/Orbited.js"></script><script>Orbited.settings.port = 9000;TCPSocket = Orbited.TCPSocket;Orbited.settings.streaming = false;</script><script src="http://{{ orbited_host }}/static/protocols/stomp/stomp.js"></script>

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 ); };

...

...

var logger = Orbited.getLogger("example"); 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;}

Problems(some)

IE (6,7,8)ALL different behaviours

References:

http://orbited.org/blog/2008/09/integrating-orbited-with-web-app-frameworks/http://stomp.codehaus.org/

http://www.djangoproject.comhttp://orbited.org