Skip to content
An MQTT Dashboard developed during Angular Attack 2016.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
app Usability improvements and demo help May 15, 2016
readme-images General architecture image tweak May 15, 2016
.gitignore Added quick build script for deployment May 14, 2016
.surgeignore Removing node_modules which was causing surge deploy issues (sorry!).… May 14, 2016
CNAME Initial Commit May 12, 2016
README.md
build.js Added quick build script for deployment May 14, 2016
index.html Updated README + usability improvements May 15, 2016
package.json Added hightcharts for showing data May 15, 2016
styles.css Adding of mqtt source and displaying them May 14, 2016
systemjs.config.js
tsconfig.json Changed to starter project to TypeScript May 14, 2016
typings.json Added hightcharts for showing data May 15, 2016

README.md

MQTT Dashboard

An MQTT Dashboard developed during Angular Attack 2016.

It allows you to monitor any MQTT topics in real time from anywhere (as long as they are available online)

Screenshot

Demo

To demo this app, take a look at the site where this app was deployed during the hackathon: http://bjaanes.2016.angularattack.io/

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

Introduction to the project

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

For a little more information about MQTT and how I used it, take a look at a previous blog post I did about the subject: http://gjermundbjaanes.com/smart-home-series-part-1-learning-mqtt-and-buying-stuff/

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

Possible future improvements

The following improvements were considered but did not make it into the app during the hackathon:

  • Saving sources in local storage to persist between app instances
  • Support wildcard topics
  • Support different types of output from topics (text for instance)
  • Different types of graphs for each MQTT topic
  • Send MQTT messages to different topics and brokers in the app
  • Add more information to a source connection (like units for data)
  • More in-app help

Development

Setup

You need node.js and npm to install and run this app in development.

You also need an mqtt websocket bridge server, that can be found here: https://github.com/bjaanes/mqtt-ws

To install, run:

npm install

To run the app:

npm start

To deploy the app with surge to bjaanes.2016.angularattack.io:

npm run deploy

To make a static built version in a temporary public folder:

node build.js
You can’t perform that action at this time.