If you are looking for some “homework reading”, a decent place to start is Steve’s Internet Guide.
Make Mosquitto Listen for Websockets Connections
Mosquitto is the MQTT broker on the EmonPi. It is configured to listen for connections which employ the “mqtt:” protocol. It is possible to add a websockets listener (“ws:” protocol), with the conventional port 9001 assignment as follows:
- SSH onto the EmonPi and navigate to /etc/mosquitto.
- Modify the mosquitto.conf file to add “listener 9001” and “protocol websockets”, see below. I have also added explicit lines for the default mqtt listener on port 1883 in the interest of clarity, although I believe they are not required. You will need to use “sudo”. Alternatively, it should be possible to add a file to the “include_dir”.
- Restart mosquitto using “sudo systemctl restart mosquitto.service”
pid_file /var/run/mosquitto.pid persistence false persistence_location /var/lib/mosquitto/ log_dest file /var/log/mosquitto/mosquitto.log include_dir /etc/mosquitto/conf.d listener 1883 protocol mqtt listener 9001 protocol websockets allow_anonymous false password_file /etc/mosquitto/passwd log_type error
It should now be possible to test two things: that the existing mqtt protocol listener, which is relied on to service data to EmonCMS, and that the websockets listener us “up”. I used “MQTT Explorer”, a free and simple client, which should be set up to not validate a certificate and to have an empty “Basepath” (it defaults to “ws”).
My primary aim for this experiment is to be able to co-opt EmonPi to broker air quality data from a home-brew particulate matter, VOC, NOx, CO2 sensor combo, but I’m using the existing emon data to demonstrate the concept, which boils down to “guages” using the Google Charts toolkit, and scrolling line charts using Chart.js.
Here is the code to hack about with, based on snippets from various places, with modifications and updating to a recent. It should just live in a plain text file with a “.html” extension, and can be opened in your web browser. It is not beautiful but demonstrates the concept. There is some logging to the “console”, which is where error messages will also appear. Hit F12 on Firefox or Edge (or Chrome too I think) to find the console.
Don’t forget to change the IP address for the MQTT broker!
Serving the Dashboard
EmonCMS uses the Apache2 web server, so it is easy to make it listen on a different port (EmonCMS uses port 80, and I have chosen port 8001) using the following commands (in a SSH).
Create the place where the HTML file will live
cd /var/www mkdir static
Check the directory ownership is correct using “ls -la”, which should show “drwxr-xr-x 2 pi pi 4096 Nov 27 23:02 static”.
If necessary “chown pi:pi static”.
Change the Apache2 config
There are two things to change, first to make apache2 listen on port 8001, and secondly to tell it to use the files in /var/www/static in connection with port 8001 requests.
cd /etc/apache2 sudo nano ports.conf
Add a single line “Listen 8001”, then save and exit.
For the second step, enter the “sites-enabled” directory. I chose to copy the existing emoncms.conf file, naming the copy “static.conf” and editing it to contain:
<VirtualHost *:8001> ServerName localhost ServerAdmin webmaster@localhost DocumentRoot /var/www/static # Virtual Host specific error log ErrorLog /var/log/static/apache2-error.log <Directory /var/www/static> Options FollowSymLinks Indexes AllowOverride All DirectoryIndex index.html Order allow,deny Allow from all </Directory> </VirtualHost>
The changes are fairly obvious, but note that I have also added “Indexes” against “Options”. This makes apache give a listing of all the files in “static” when I use the URL “http://192.168.1.1:8001”. If you only have one dashboard, then simply name it “index.html” and it will appear when that URL is used.
Make a directory for logs
Otherwise apache2 will not restart.
cd /var/log mkdir static
To load the new config.
sudo systemctl restart apache2
Make sure EmonCMS is still working, then visit your new site! It should work adequately on a mobile phone, once rotated to landscape format.