MQTT As The Center of Everything

Internet of Things (IoT) is a buzzword that means anything from Smart Toasters to Raspberry Pi computers. I don’t know the exact definition, but I know that most devices that are marketed as IoT are built on paradigms I’m already familiar with like Pub/Sub, REST and Bluetooth Low Energy. I wanted to make a proof of concept using IoT technologies and to blog about my findings, that small beginning lead to MQTT and the rest of this project.


MQTT: MQTT is a machine-to-machine connectivity protocol with it’s underlying implementation as a pub/sub message transport. There are several implementations out there, but for this post I used Mosca, a simple MQTT broker written in Node.js. I use it as the center of my IoT application. All events/messages are passed through MQTT for consumption by different clients.

Plotly: Plotly is a visualization platform. I’ll use the Plotly streaming API to stream events from MQTT into visualization.

Spark Streaming: Spark is a distributed computing platform for batch and streaming jobs (Spark Streaming). I’ll get a stream of events from MQTT and use that to calculate some averages and distributions.

Leap Motion: A device for gesture control.

Plotly: A platform for interactive and streaming visualization.


I’ll use Node.js to Manage MQTT, Leap Motion and Phillips Hue. Node.js has a great library for IoT (Cylon.js), with drivers for each of theese devices. Writing an MQTT server that can handle the pub/sub load for this project is fairly trivial. I used Redis for persistence and just used the boilerplate code from Mosca:

Connecting to Leap Motion is also simple. I’ll send messages to two different MQTT topics. One for a specific gesture and the other will be my hand position [1] and a time stamp:

The Hue is also very simple. It will listen on a specific hand gesture topic and toggle itself on our off, it’ll publish it’s state to a light state topic:

Connecting Plotly streaming is relatively simple as well. I had to create a read stream from the MQTT topic and pipe it to Plotly:

Spark Streaming:

I was hoping to use EclarJS which is a Nashorn Spark API, allowing me to write Node.js with a Nashorn backend and write Spark Streaming Code. Unfortunately, it required a bit more overhead to use additional libraries not included with the default configuration of Spark. Since the code was so simple I just decided to write it in Scala and I’ll save EclairJS for another post. Spark will consume the Leap Motion hand motion topic as a stream every 5 seconds and calculate summary statistics on the hand motion.

I’ve decided that it’s easier to create a few videos showcasing the technology one connection at a time. We’ll start with publishing LeapMotion gestures to MQTT:

Now we’ll connect the Hue bulb and and show how it reacts to messages in the queue [2].

Here’s a quick real life demo to get an idea of what I’m talking about:

Now we’ll demonstrate the Spark Streaming side of things:

Finally, the Plotly side of things:

Now, this set up is not all together very useful or practical. I certainly don’t need my Leap Motion to turn on the lights (That’s what Amazon Echo and Siri are for), nor do I need a stream of activity from my Leap Motion to be visualized in real time. The point of this post is MQTT was the center of it all. Each device or API was subscribed to a topic and or published to one and behaved from there. Message queues are not new but it’s easy to see their value in this context.

Whats Next

I’m not sure if I’ll keep doing much with this project. As mentioned above it’s not the most useful thing in the world. If anyone is curious about it, all the code is up on Github if you’d like to check it out. You’ll need to have a Leap Motion and Phillips Hue to use it, however.


[1] This is techically the sphere radius. I needed an X value in one dimension for my Time series plot.

[2] You’ll notice from the video that the gesture reading from Leap Motion leaves much to be desired. You’ll also notice I am keying in on the ‘keyTap’ gesture in the code, however I am using a swipe gesture. This is either a bug in the API or a problem with my Leap Motion. Iā€m trying to get my hands on another Leap Motion to rule out the latter.

[3] This blog post wouldn’t be possibly without great open source work. Thanks to the maintainers of Cylon.js, Mosca.js, Plotly.js, and Apache Spark.

[4] This is a great article on MQTT if you’re curious about the protocol.