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
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
node pusher.js &

Step 6: Create your web page
create the file /var/www/iot_demo.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

Creating your own Internet of Things

These instructions will help you setup your own Internet of Things.

What is the Internet of Things?  Moore's Law accurately predicted that computing density would roughly double every 18 months.  Today we have credit-card sized, fully-functional, general purpose computers that cost $35.  Eventually we will reach a point where embedded computing will be so small, cheap and low-power that many everyday objects (light switches, garage doors, thermostats, kitchen appliances, etc) will include an embedded processor/micro-controller.  These smart objects will be able to communicate, collaborate, coordinate with other objects and human interfaces to automate existing tasks, and enable new capabilities.

Some example ideas:

• Set the room brightness with your smartwatch
• Have your lights automatically turn on/off as you travel from room to room
• See the remaining time on the clothes dryer
• Track the internal temperature of the pot roast in the oven
• lower your heating and cooling bills by reducing the climate control in unused rooms
• unlock your door by simply grasping the handle

While there's many ways to go about it, I'll describe the approach I used.

Things you'll need for a basic setup:

• Raspberry Pi 2 model B
• 4GB+ SD card
• power adapter
• HDMI cable
• Ethernet cable or compatible WiFi adapter
• monitor, keyboard, mouse
• Arduino
• Ethernet shield + Ethernet cable
• USB programming cable
• PC for programming the Arduino

Step 1: Setup your Raspberry Pi

1. Follow this guide to install Raspbian Wheezy onto your Raspberry Pi
2. Install MQTT

   curl -O http://repo.mosquitto.org/debian/mosquitto-repo.gpg.key
sudo apt-key add mosquitto-repo.gpg.key
rm mosquitto-repo.gpg.key
cd /etc/apt/sources.list.d/
sudo wget http://repo.mosquitto.org/debian/mosquitto-wheezy.list
sudo apt-get update
sudo apt-get upgrade
sudo apt-get install mosquitto mosquitto-clients 

3. Subscribe to a  MQTT topic
   

   mosquitto_sub -h YOUR_RPI_IP_ADDRESS -t hello/world

4. Publish to a topic
   In another terminal window execute:
   

   mosquitto_pub -h YOUR_RPI_IP_ADDRESS -t hello/world -m "Hello World"

Step 2: Setup your Arduino

1. Download the arduino pubsubclient from GitHub
• Unzip the file and copy it into your Arduino/libraries directory
2. Build the circuit
• Connect an LED to pin 3 of the arduino through a 220 Ohm resistor
• Connect an SPST (normally open momentary contact) switch between pin 2 and ground
3. Program your Arduino
• Grab this example Arduino sketch
• change the server[] to your Rasberry Pi's IP address
• load the code onto your Arduino
4. Setup a subscriber to monitor the "led" topic
• On your Raspberry Pi, open a terminal and subscribe the the "led" topic
  mosquitto_sub -h YOUR_RPI_IP_ADDRESS -t led
5. Power up your Arduino 
1. You should see "Hello World" published to the "led" topic
2. When you press the switch you should see "on" or "off" on the "led" topic.
3. When "on" appears, the LED should turn on and vice versa.

Here's a code example for the Spark Core:

• Pastebin link

Useful Links:

• Raspbian image
• Installing Mosquitto on a Raspberry Pi
• Arduino Client for MQTT
• Arduino Ethernet library
• Arduino Bounce library