One man team with Gjermund Bjaanes.

Team Members

Launch Site

MQTT Dashboard

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.

V800 screenshot from 2016 05 18 08 13 40

Description

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/

What is it?

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.

What is MQTT?

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: MQTT Architecture

How does it work?

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:

MQTT Dashboard Architecture

What makes it special?

Two things in particular:

  1. Allowing to connect to MQTT sources that doesn't support Websockets natively.
  2. Allowing to connect to any number of sources and topics and viewing them real time with graphs

This makes this app an easy solution to monitor your MQTT topics in real time in a convenient manner.

Limitations

There are a few limitations that should be noted:

  • Only topics which output numbers will work (otherwise nothing of value will be shown)
  • Wildcard topics are not supported

Instructions

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:
https://www.youtube.com/watch?v=wYjuudkOjxA

Built With

Libraries and resources used in this app:

  • Angular 2
  • JQuery
  • Materialize CSS
  • Highcharts
  • Raven (for Sentry)
  • TypeScript
  • SystemJS
  • es6-shim
  • angular2-in-memory-web-api
  • reflect-metadata
  • rxjs
  • zone.js
  • concurrently
  • lite-server
  • surge
  • systemjs-builder
  • typings
  • mqtt-ws (https://github.com/bjaanes/mqtt-ws) <- This is the back-end piece that bridges MQTT and Websockets.
  • heroku for deploying mqtt-ws
  • DigitalOcean for running mock MQTT scripts

Feedback / Ratings (16)

All Feedback