Working with MQTT and the Really Small Message Broker
Ever since i had a conversation with Andy Piper about his experiments with PHP and MQTTi’ve been interested to see how the RSMB can help create sites that are dynamic and driven by a pub-sub type archietcture. At the moment my main motivation was to improve on a scoring system i wrote a while back to handle live scores for a European Ultimate Championships. The problem with this site was simply that it didn’t scale. In fact the data was so new to the sport that the site was hit much more than i could have possibly imagined. As you can imagine each hit, on a page with in the region of 34 games, produced a number of SQL queries and most of the time that data hadn’t changed. Once you add in the overhead of the page itself, my poor server was beaten quite badly.
With the RSMB in any normal application, you get a way to provide close to real time updates to the clients that are subscribed to a particular topic. In the context of a scoring system this would be all the web browsers that were looking at the data at that particular point in time. For a ideal world, HTML elements would be passed down the wire and the page would be updated dynamically using an AJAX based approach. Unfortunately we aren’t quite in an ideal world.
The biggest problem with this approach was to find a client side API which could offer a persistent connection. While tools such as JavaScript are client side they do not support sockets. PHP and other server side tools do not allow for call backs and as such once the data is laoded it would be static.
To overcome this problem, Andy and myself have decided to write an implementation to bridge the gap. This implementation is a combination of JavaScript and Flash. JavaScript was used because it can provide a nice interface so that we can update the HTML on the fly. In addition it also provides a call back interface into Flash, which fortunately for us allows sockets to be opened. That gets the theory in place, but what we had to do was to implement the MQTT API in Flash. Although at the moment only a small part of the API, it implements enough to keep a connection alive, publish and importantly subscribe to a topic. So far the initial reaction has been really positive and the code has been working well with all kinds of data. Over the coming weeks we hope to be putting the finishing touches to the code and fixing any bugs so that it can be used more widespread. If anyone would like to see it in action, there is a live demo here
To use this new code, the intention was to make the modifications as small as possible. For any standard web page, adding the following two sections is enough.
- Load the classes – at the top of the ‘body’ tag, add the following.
<script language="JavaScript" src="./dev/html/include/mqtt/jquery.js"></script> <script language="JavaScript" src="./dev/html/include/mqtt/swfobject.js"></script> <script language="JavaScript" src="./dev/html/include/mqtt/mqtt.js"></script> <script language="JavaScript"> var ip = "<?php echo $_SERVER['REMOTE_ADDR']."_".$_SERVER['REMOTE_PORT']; ?>"; var clientID="client_" + ip; var broker = new Broker(); broker.connect("localhost", 1883, clientID, false, false); broker.setTimeout(50); </script> - Add the subscription for each node – adding the following class and title attributes to any HTML
object will subscribe to ‘test/topic’.<td width="55" class="mqtt" title="test/topic" style="background: #FD8171;" > </td>
And thats it! The code will look for all objects of class ‘mqtt’ and subscribe to the topic given in the ‘title’
attribute. Information about the connection, subscription, and publication will all be logged into the console
windows and the elements will be updated with an animated icon indicating progress.