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.
Basically it's the same concept of code with some enhancements.
-
Install
node.js
(in my case, i used the newest Package-Installer for Mac from nodejs.org)brew install nodejs
-
Clone the Repo
git clone https://github.com/eLement87/mqtt-websocket-dashboard.git
-
Download the Dependencies
npm install mqtt npm install socket.io
-
Start the Server
node app.js
-
Open your Browser
http://localhost:8888
I used ESPeasy on my ESP-Module that publish's the Data to my Raspberry and Mosquitto.
- ...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
- 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 ;)
- 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