Archives for MQTT JavaScript

ESP8266 MQTT Publication & External Subscription

mqtt

Publishing data produced by ESP8266 sensors to an MQTT broker server is a great option to making your IoT data visible to outside consumers with minimal consumption of precious MCU bandwidth. Simple, easy to implement and very light-weight.

What a great distribution system!

Simply publish your ESP8266 sensor data once, and many subscribers can consume the information, virtually at the same time. Sweet!

MQTT Basics

In case you are new to MQTT, here are a few basics. MQTT is the acronym for message queuing telemetry transport. Now that’s a mouthful! It is essentially a protocol that follows the publish/subscribe model to distribute information from one source to many users.

Here’s a few links for more MQTT information:

I’ve put together an ESP8266 MQTT demo project using an Arduino IDE sketch to publish data for consumption by subscribers using the MQTT protocol. Several options for consuming the data as a subscriber are also presented…

MQTT Broker/Server

For demo purposes, I wanted to use a free broker. After testing a few of the available options, I settled on using the Mosquitto MQTT server. While unsecured, meaning anyone who knows your “topic” can subscribe to the data, it works great for a proving out your design.

server: test.mosquitto.org

port: 1883

Arduino IDE Sketch

There is one library that needs to be added to the Arduino IDE to access the MQTT broker. It’s called “PubSubClient”. Here is how to install it…

Step 1: Open the Arduino IDE

Step 2: From the menu, select Sketch>Include Library>Manage Libraries…

Step 3: Enter “PubSubClient” in the search box.

PubSubClient

Step 4: Click on the “Install” button

Now that was easy.

Great!

But there is one more thing to do  after installing PubSubClient. I have found that the default maximum packet size (128 bytes) is insufficient. You should at least double it to 256 bytes.

How?

Just open the file “…/Arduino/libraries/pubSubClient/src/PubSubClient.h and change the following line:

From:

#define MQTT_MAX_PACKET_SIZE 128

To:

#define MQTT_MAX_PACKET_SIZE 256

Now lets talk about the sketch to test MQTT with the ESP8266…

The setup() function performs 3 basic tasks:

Setup()

  • setup serial port
  • connect to wifi
  • set MQTT broker/server

And loop() maintains the Wifi and MQTT connections, reads the sensors, and publishes the values to the MQTT broker.

Loop()

  • Reconnect to WiFi if disconnected
  • Reconnect to MQTT broker/server if disconnected
  • Read Sensor(s)
  • Publish Sensor data

Here is a break-down of the sketch. First, the objects must be identified

 
 
  1. #include <ESP8266WiFi.h>
  2. #include <PubSubClient.h>
  3. #define wifi_ssid "Your SSID"
  4. #define wifi_password Your Wifi password"
  5. #define mqtt_server "test.mosquitto.org"
  6. #define mqtt_user "not used in this example"
  7. #define mqtt_password "not used in this example"
  8. #define topic1 "t1"
  9. #define topic2 "t2"
  10. WiFiClient espClient;
  11. PubSubClient client(espClient);

And then the sketch setup…

 
 
  1. void setup() {
  2.    Serial.begin(115200);
  3.    setup_wifi();
  4.    client.setServer(mqtt_server, 1883);
  5. }

A typical Wifi connect function:

 
 
  1. void setup_wifi() {
  2.    delay(10);
  3.    // We start by connecting to a WiFi network
  4.    Serial.println();
  5.    Serial.print("Connecting to ");
  6.    Serial.println(wifi_ssid);
  7.    WiFi.begin(wifi_ssid, wifi_password);
  8.    while (WiFi.status() != WL_CONNECTED) {
  9.      delay(500);
  10.      Serial.print(".");
  11.    }
  12.    Serial.println("");
  13.    Serial.println("WiFi connected");
  14.    Serial.println("IP address: ");
  15.    Serial.println(WiFi.localIP());
  16. }

The loop() simply makes sure a connection to the MQTT is made, reads the sensors, and publishes the results. The publish rate is set at 2 seconds minimum.

 
 
  1. void loop() {
  2.   if (!client.connected()) {
  3.     reconnect();
  4.   }
  5.   client.loop();
  6.   //2 seconds minimum between Read Sensors and Publish
  7.   long now = millis();
  8.   if (now - lastMsg > 2000) {
  9.       lastMsg = now;
  10.       //Read Sensors (simulated by increasing the values, range:0-90)
  11.       t1 = t1>90 ? 0 : ++t1;
  12.       t2 = t2>90 ? 0 : ++t2;
  13.       //Publish Values to MQTT broker
  14.       pubMQTT(topic1,t1);
  15.       pubMQTT(topic2,t2);
  16.   }
  17. }

Just copy and paste this complete sketch as a starting template to test your own MQTT publishing with the ESP8266. Remember, you will need to set the WIFI ssid & password in the sketch to your access point values before running.

 
 
  1. #include <ESP8266WiFi.h>
  2. #include <PubSubClient.h>
  3. #define wifi_ssid "YOURSSID"
  4. #define wifi_password "YOURPASSWORD"
  5. #define mqtt_server "test.mosquitto.org"
  6. #define mqtt_user "your_username"
  7. #define mqtt_password "your_password"
  8. #define topic1 "t1"
  9. #define topic2 "t2"
  10. WiFiClient espClient;
  11. PubSubClient client(espClient);
  12. void setup() {
  13.    Serial.begin(115200);
  14.    setup_wifi();
  15.    client.setServer(mqtt_server, 1883);
  16. }
  17. void setup_wifi() {
  18.    delay(10);
  19.    // We start by connecting to a WiFi network
  20.    Serial.println();
  21.    Serial.print("Connecting to ");
  22.    Serial.println(wifi_ssid);
  23.    WiFi.begin(wifi_ssid, wifi_password);
  24.    while (WiFi.status() != WL_CONNECTED) {
  25.      delay(500);
  26.      Serial.print(".");
  27.    }
  28.    Serial.println("");
  29.    Serial.println("WiFi connected");
  30.    Serial.println("IP address: ");
  31.    Serial.println(WiFi.localIP());
  32. }
  33. void reconnect() {
  34.    // Loop until we're reconnected
  35.    while (!client.connected()) {
  36.      Serial.print("Attempting MQTT connection...");
  37.      // Attempt to connect
  38.      if (client.connect("TestMQTT")) { //* See //NOTE below
  39.        Serial.println("connected");
  40.      } else {
  41.        Serial.print("failed, rc=");
  42.        Serial.print(client.state());
  43.        Serial.println(" try again in 5 seconds");
  44.        // Wait 5 seconds before retrying
  45.        delay(5000);
  46.      }
  47.    }
  48. }
  49. //NOTE: if a user/password is used for MQTT connection use:
  50. //if(client.connect("TestMQTT", mqtt_user, mqtt_password)) {
  51. void pubMQTT(String topic,float topic_val){
  52.     Serial.print("Newest topic " + topic + " value:");
  53.     Serial.println(String(topic_val).c_str());
  54.     client.publish(topic.c_str(), String(topic_val).c_str(), true);
  55. }
  56. //Variables used in loop()
  57. long lastMsg = 0;
  58. float t1 = 75.5;
  59. float t2 = 50.5;
  60. void loop() {
  61.   if (!client.connected()) {
  62.     reconnect();
  63.   }
  64.   client.loop();
  65.   //2 seconds minimum between Read Sensors and Publish
  66.   long now = millis();
  67.   if (now - lastMsg > 2000) {
  68.       lastMsg = now;
  69.       //Read Sensors (simulate by increasing the values, range:0-90)
  70.       t1 = t1>90 ? 0 : ++t1;
  71.       t2 = t2>90 ? 0 : ++t2;
  72.       //Publish Values to MQTT broker
  73.       pubMQTT(topic1,t1);
  74.       pubMQTT(topic2,t2);
  75.   }
  76. }

Testing Tools

While there are many tools available, here are a few I have found that you can use to verify the ESP8266 is actually publishing the data.

How?

Simply subscribe to the topic and watch the information updates in real-time.

Google Chrome Application

First try using MQTTLens, an off-the-shelf tool to subscribe to the published data. You can get MQTTLens here. Although this app is installed via Google Chrome, it runs as standalone application. At this time, Chrome apps are supported using Windows, Mac and Linux operating systems.

This app provides basic functionality for testing MQTT publish/subscribe messages.

Once the app has been installed and started, a few configuration steps are needed to connect to our MQTT broker and subscribe to the ESP8266 published topics.

Just click on the configuration icon and fill in the information as shown below:
mqttlenssetup
Once you are connected to the broker, the only thing left to do is subscribe to the data feed. For this example, two topics are published by the ESP8266; t1 and t2. Enter one of these and click on the subscribe button to monitor the data as it is published.
mqqtlens_subscribe
Notice you can change the number of messages displayed using the “-+” icons.

Web Page using JavaScript

MQTTLens is a great tool to get a quick look at your MQTT published data. But when you move from merely testing the data feed to developing a custom application, full control to manipulate and display the information is essential.
Fortunately, this is a simple task using only JavaScript and html.
I’ve developed the following html code to subscribe to the ESP8266 published data. This may be useful as a template on your own website. Simply open a file with this code in a web browser to test. Name this file as you please, using “.html” as the file name extension. In this example, I have named the file “mqtt_subscribe.html”.

 
 
  1. <!DOCTYPE html>         
  2. <html>         
  3. <head>         
  4. <title>MQTT JavaScript Client Example</title>         
  5. <!-- Latest compiled and minified CSS - add here as needed -->         
  6. </head>         
  7. <body>         
  8. <!-- HTML to display MQTT topic values -->         
  9. <div><strong>Published ESP8266 topics via MQTT:</strong></div><br>         
  10. <div id="t1"></div>         
  11. <div id="t2"></div>         
  12. <!-- mosquitto MQTT -->         
  13. <script type="text/javascript" src="http://test.mosquitto.org/mosquitto.js"></script>         
  14. <!-- jQuery -->         
  15. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>         
  16. <!-- Custom MQTT client for this example -->         
  17. <script>         
  18. // Create a client instance         
  19. client = new Mosquitto();         
  20. // Connect to MQTT broker         
  21. var url = "ws://test.mosquitto.org:8080/mqtt";         
  22. client.connect(url);         
  23. // Callback executed upon connection         
  24. client.onconnect = function(rc){         
  25. var topic = 't1';         
  26. client.subscribe('t1', 0);         
  27. client.subscribe('t2', 0);         
  28. };         
  29. //Callback executed upon disconnection         
  30. client.ondisconnect = function(rc){         
  31. client.connect(url);         
  32. };         
  33. //Callback executed upon receipt of MQTT message         
  34. client.onmessage = function(topic, payload, qos){         
  35. if(topic=="t1") {         
  36. $("#t1").html("Topic: t1 Value: " + payload);         
  37. }         
  38. if(topic=="t2") {         
  39. $("#t2").html("Topic: t2 Value: " + payload);         
  40. }         
  41. };         
  42. </script>         
  43. </body>         
  44. </html>

Just to keep things clean and simple, no css styling is included in this example. Here is a snapshot of the browser windows when this file is viewed:

mqqt_javascript_

Android

While I have not yet explored the development of a custom Android App to interface with an MQTT broker, it is certainly possible. What immediately comes to mind, in the spirit of App portable, would be to develop an Android Cordova App. This would allow you to reuse the above html code, without modification.
Here is my step-by-step guide to get started.
But if you are looking for an off-the-shelf MQTT test application, I recommend using MyMQTT . This is a free App available in Google Play Store. Once installed, there are only a few steps needed to subscribe to the ESP8266 example MQTT feed.
The App will startup with the following screen:
Mymqtt_main
First set the app to connect with the broker we are using for this example. Click on “Settings” and enter the broker information as shown:
Mymqtt_setup
Then subscribe to the ESP8266 published topics (t1 and t2):
Mymqtt_subscribe
The dashboard will then display the topic data as it is published:
Mymqtt_messages

Iphone/iPad

MQTTInspector is the most popular App to test MQTT feeds from an iOS device. At $1.99, is not free, yet certainly low-cost. As a Windows, Android and Linux user, I cannot provide any additional information regarding this tool. It appears to be similar to other MQTT client test tools, and can be found on iTunes here.

In Conclusion

Here you have it. A simple guide to publishing topics from an ESP8266 device to an MQTT broker. All you need is a simple Arduino IDE sketch.

Once published, this data feed can be consumed cross-platform, on any device that supports MQTT. From this article, this includes but is certainly not limited to Windows, Mac and iOS. There are also Linux packages available to support MQTT clients.

As always, I hope you find this information useful…

Loading

Share This:
FacebooktwitterredditpinterestlinkedintumblrFacebooktwitterredditpinterestlinkedintumblr

Press Ctrl+C to copy the following code.
"