Scribd
Upload
135 views

GitHub - Element87 - Mqtt-Websocket-Dashboard - A MQTT Live Dashboard For ESP8266

This document summarizes an MQTT live dashboard project for ESP8266 on GitHub. The dashboard displays MQTT messages from an ESP8266 in a browser. It uses Node.js, Socket.io and MQTT to subscribe to topics and display updates in real-time. The README provides instructions for installing dependencies and running the server to view the dashboard at localhost:8888. It also outlines plans for future improvements like dynamic divs and a topic configuration menu.

Uploaded by

Pedro Cândido
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
135 views

GitHub - Element87 - Mqtt-Websocket-Dashboard - A MQTT Live Dashboard For ESP8266

This document summarizes an MQTT live dashboard project for ESP8266 on GitHub. The dashboard displays MQTT messages from an ESP8266 in a browser. It uses Node.js, Socket.io and MQTT to subscribe to topics and display updates in real-time. The README provides instructions for installing dependencies and running the server to view the dashboard at localhost:8888. It also outlines plans for future improvements like dynamic divs and a topic configuration menu.

Uploaded by

Pedro Cândido
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

30/08/2019 GitHub - eLement87/mqtt-websocket-dashboard: A mqtt live Dashboard for ESP8266

eLement87 / mqtt-websocket-dashboard

Dismiss
Join GitHub today
GitHub is home to over 40 million developers working together to host and
review code, manage projects, and build software together.

Sign up

A mqtt live Dashboard for ESP8266

2 commits 1 branch 0 releases 1 contributor

Branch: master New pull request Find File Clone or download

eLement87 edit typo Latest commit ead4271 on 11 May 2016

css initial commit 3 years ago

img initial commit 3 years ago

js initial commit 3 years ago

.gitignore initial commit 3 years ago

Dashboard.gif initial commit 3 years ago

README.md edit typo 3 years ago

app.js initial commit 3 years ago

index.html initial commit 3 years ago

README.md

MQTT Websocket Dashboard


I searched for a opportunity to receive mqtt message from my ESP8266 Module and display it live in a Browser. I found a
tutorial from Robert Hekkers. But the example didn't work for me.

After some hours spent on studying node.js , Javascript and Socket.io - i ended up with this nice looking Dashboard.

https://github.com/eLement87/mqtt-websocket-dashboard 1/3
30/08/2019 GitHub - eLement87/mqtt-websocket-dashboard: A mqtt live Dashboard for ESP8266

Basically it's the same concept of code with some enhancements.

How to Install:
1. Install node.js (in my case, i used the newest Package-Installer for Mac from nodejs.org)

brew install nodejs

2. Clone the Repo

git clone https://github.com/eLement87/mqtt-websocket-dashboard.git

3. Download the Dependencies

npm install mqtt


npm install socket.io

4. Start the Server

node app.js

5. Open your Browser

http://localhost:8888

How
I used ESPeasy on my ESP-Module that publish's the Data to my Raspberry and Mosquitto.

To Do...
...better Documentation
find out how to build the div's dynamicly based on the topic names/data (static divs)
how to build a config menu to subscribe topics in a webinterface and save that to a database

https://github.com/eLement87/mqtt-websocket-dashboard 2/3
30/08/2019 GitHub - eLement87/mqtt-websocket-dashboard: A mqtt live Dashboard for ESP8266

better comprehension in Javascript etc.


and of course better englisch :D

If somebody have the knowledge or improvements - feel free to send a pull request to tell me how ;)

Credits
Robert Hekkers - Realtime data with MQTT, Node.js, MQTTClient.js and Socket.IO -
http://blog.hekkers.net/2012/10/13/realtime-data-with-mqtt-node-js-mqtt-js-and-socket-io/
node.js - http://nodejs.org
socket.io - http://socket.io/
jquery - https://jquery.com
Sematic UI - https://github.com/Semantic-Org/Semantic-UI
Responsive Grid System - http://responsivegridsystem.com
Gifrocket - http://www.gifrocket.com
Icons made from www.flaticon.com is licensed by CC 3.0 BY

https://github.com/eLement87/mqtt-websocket-dashboard 3/3

You might also like