One man team with Gjermund Bjaanes.
MQTT is a protocol often used in IoT. It's based around pub-sub architecture with clients and a single broker. The MQTT Dashboard allows the user to connect to any number of MQTT brokers and topics and view the data that is publish in real time, even if the MQTT brokers do not support Websockets.
I have written a blog post which mentions a lot of the same things as this description, but it can be found here: http://gjermundbjaanes.com/angular-attack-2016-submission/
The MQTT Dashboard allows the user to connect to any number of MQTT sources and topics and view the data the publish in real time.
The app is written mainly with Angular 2 and TypeScript.
MQTT is publish-subscribe light weight messaging protocol often used in IoT scenarios.
The protocol is based on one or more devices subscribing to “topics” and one or more devices publishing on “topics”. The subscribing devices get all messages for a specific topic that someone publishes on.
You also need a message broker to control the flow of all these messages.
In this case, the MQTT Dashboard can subscribe to many different brokers and topics at will.
A typical diagram of the MQTT architecture will look something like this:
The biggest technical challenge related to this app is the fact that most MQTT brokers do no support Websockets (some do, but that is not the most common today) and browsers do not support MQTT.
To solve this problem the app uses an MQTT Websocket bridge as it's backend. That means that the MQTT Dashboard connects to the backend with websockets, which deals with all the MQTT business that the browser cannot.
Such a bridge already exists, but did not work exactly like needed for the app, so another version with a few modifications has been created here: https://github.com/bjaanes/mqtt-ws
The architecture for the app then looks something like this:
Two things in particular:
This makes this app an easy solution to monitor your MQTT topics in real time in a convenient manner.
There are a few limitations that should be noted:
I have tried to make demo data easily available in the app, but an explanation might be useful anyway.
There are a few topics which can be connected to that will demonstrate how the app works: Host: test.mosquitto.org Port: 1883
Topic: bjaanes/mock/home/temperature Random numbers meant to demonstrate temperature readings from a sensor
Topic: bjaanes/mock/street/car-speed Random numbers mean to demonstrate a sensor showing speed of passing cars in your street
Topic: bjaanes/mock/random10k Random numbers between 0 and 10000
You can also use any MQTT broker and topics you wish to use, but these should be populated every second or so with data. You could for instance download MQTTfx, which is an MQTT client that allows you to connect to brokers and send data. http://www.jensd.de/apps/mqttfx/
You can use any online available brokers to test this, for instance: * test.mosquitto.org * iot.eclipse.org
View the screencast:
Libraries and resources used in this app:
I got a socket timeout. Maybe you can help me with this. I would like to try it out :) After this will change my Feedback of course :)
So simple but so useful. Maybe even because it is simple.
There were many things that could be added and make this a powerful tool. But for 48 hours and a solo team this is good work.
Nice design, i didn't knew there was a special protocol (MQTT) for IOT, good to know!
Good work, I learnt lot of things.
Nice work. I would prefer having one second interval instead of two !
The concept is a little complicated for me but I like your use of charts.
Real-time nature of the application
Very well documented and a cool way to track data
This is very compelling. It's a very cool proof-of-concept for an up and coming technology that I think would be very useful for many developers. The fact that it abstracts out the websocket functionality adds a ton to its value. While it's not the sexiest hackathon topic, this is one of the projects I can see myself coming back to use again and again. Excellent job!
The graphs look great and having easy access to data visualization is really useful. The ability to remove a graph and to label the value in the vertical axes would be nice.
It works and it looks great!
Well presented, good use of Material design.