Real-Time Web Interface to MQTT using Socket.io and Node.js

Real-Time Web Interface to MQTT using Socket.io and Node.js

First, all credit for this tutorial goes to Robert Hekkers Blog.  I've altered it slightly to pick up newer versions of the various javascript libraries.

If you've followed along with my earlier post, you now have MQTT running on your Raspberry Pi, and an Arduino IoT client that can publish and subscribe to MQTT packets.  The next step is developing a real-time web interface that can control your MQTT network.

Why Socket.io and Node.js?
Web browsers typically operate by pulling data from a server when you click on a link.  Servers don't usually keep an open connection to the browsers it has serviced, so if some event happens on the server side, the server cannot push that event to your browser, unless you refresh the page.

That's where Socket.io comes in handy.  Socket.io maintains an open connection between the server and the browser, which enables the server to push updates to the browser as they happen.  This is useful so you can see changes to your IoT network as they happen, and not have to wait for a page refresh.

Step 1: Setup a Web Server on your Raspberry Pi
sudo apt-get install apache2 -y
hostname -I
Now test your web server by using a web browser to navigate to your Raspberry Pi's web address

Step 2: Get Socket.IO, Node.js and the MQTT client
wget http://node-arm.herokuapp.com/node_latest_armhf.deb
sudo dpkg -i node_latest_armhf.deb
sudo apt-get install npm
cd /var/www
sudo npm install mqtt
sudo npm install socket.io

Step 3: Test Your Node.js and MQTT client
create the file /var/www/mqtt_test.js

DATA HOSTED WITH ♥ BY PASTEBIN.COM - DOWNLOAD RAW - SEE ORIGINAL

1. var mqtt    = require('mqtt');
2. var client  = mqtt.connect('mqtt://test.mosquitto.org');
3.  
4. client.on('connect', function () {
5.     client.subscribe('presence');
6.     client.publish('presence', 'Hello mqtt');
7. });
8.  
9. client.on('message', function (topic, message) {
10.   // message is Buffer
11.     console.log(message.toString());
12.     client.end();
13. });

node mqtt_test.js
Then change the server URL from test.mosquitto.org to your Rpi's IP address
node mqtt_test.js

Step 4: Get Thomas Reynolds' iOS Style Jquery Checkboxes
cd ~/
wget https://github.com/tdreyno/iphone-style-checkboxes/archive/v1.zip
unzip v1.zip
cd iphone-style-checkboxes-1
sudo cp -pr jquery /var/www
sudo cp -pr images /var/www
sudo cp style.css /var/www

Step 5: Create a Node.js script to link Socket.io to MQTT
create the file /var/www/pusher.js

DATA HOSTED WITH ♥ BY PASTEBIN.COM - DOWNLOAD RAW - SEE ORIGINAL

1. /* Pusher.js
2. Server side node.js script that services real-time websocket requests
3. Allows websocket connections to subscribe and publish to MQTT topics
4. */
5.  
6. var sys = require('sys');
7. var net = require('net');
8. var mqtt = require('mqtt');
9.  
10. // create a socket object that listens on port 5000
11. var io = require('socket.io').listen(5000);
12.  
13. // create an mqtt client object and connect to the mqtt broker
14. var client = mqtt.connect('mqtt://192.168.1.116');
15.  
16. io.sockets.on('connection', function (socket) {
17.     // socket connection indicates what mqtt topic to subscribe to in data.topic
18.     socket.on('subscribe', function (data) {
19.         console.log('Subscribing to '+data.topic);
20.         socket.join(data.topic);
21.         client.subscribe(data.topic);
22.     });
23.     // when socket connection publishes a message, forward that message
24.     // the the mqtt broker
25.     socket.on('publish', function (data) {
26.         console.log('Publishing to '+data.topic);
27.         client.publish(data.topic,data.payload);
28.     });
29. });
30.  
31. // listen to messages coming from the mqtt broker
32. client.on('message', function (topic, payload, packet) {
33.     console.log(topic+'='+payload);
34.     io.sockets.emit('mqtt',{'topic':String(topic),
35.                             'payload':String(payload)});
36. });

node pusher.js &

Step 6: Create your web page
create the file /var/www/iot_demo.html

DATA HOSTED WITH ♥ BY PASTEBIN.COM - DOWNLOAD RAW - SEE ORIGINAL

2. <html lang="en">
3. <head>
4. <meta charset="UTF-8">
5. <h1>Real Time</h1>
6. <script src="https://cdn.socket.io/socket.io-1.3.5.js"></script>
7. <scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
8. <script src="jquery/iphone-style-checkboxes.js"></script>
9. <link rel="stylesheet" href="style.css">
10. <script>
11.   $(document).ready(function() {
12.         $(':checkbox').iphoneStyle({
13.             onChange: function(elem,val) {
14.                 if (val) {
15.                     socket.emit('publish', {topic:"led",payload:"on"});
16.                 } else {
17.                     socket.emit('publish', {topic:"led",payload:"off"});
18.                 }
19.             }
20.         });
21.     });
22. </script>
23. <script>
24.   var socket = io.connect('192.168.1.116:5000');
25.   socket.on('connect', function () {
26.     socket.on('mqtt', function (msg) {
27.       console.log(msg.topic+' '+msg.payload);
28.       if (msg.payload == "off") {
29.         if ($('input[name=led]').is(':checked')) {
30.           $('input[name=led]').prop('checked',false).change();
31.         }
32.       }
33.       if (msg.payload == "on") {
34.         if (!$('input[name=led]').is(':checked')) {
35.           $('input[name=led]').prop('checked',true).change();
36.         }
37.       }
38.     });
39.     socket.emit('subscribe',{topic:'led'});
40.   });
41. </script>
42. </head>
43.  
44. <body>
45.   <div class='table'>
46.     <table>
47.       <tr>
48.         <td style='vertical-align: middle !important;'>
49.           LED:
50.         </td>
51.         <td>
52.           <input name="led" checked='checked' class='yesno'type='checkbox' />
53.         </td>
54.       </tr>
55.     </table>
56.   </div>
57. </body>
58. </html>

Step 7: Test your real-time web interface
mosquitto_sub -t "led"
browse to http://your_rpi_ip_address/iot_demo.html
toggle the checkbox, and you should see messages on your MQTT network Now open multiple browsers and try toggling the checkbox