{"id":1121,"date":"2015-11-11T12:14:17","date_gmt":"2015-11-11T20:14:17","guid":{"rendered":"http:\/\/internetofhomethings.com\/homethings\/?p=1121"},"modified":"2016-01-13T14:17:52","modified_gmt":"2016-01-13T22:17:52","slug":"esp8266-mqtt-publication-external-subscription","status":"publish","type":"post","link":"https:\/\/internetofhomethings.com\/homethings\/?p=1121","title":{"rendered":"ESP8266 MQTT Publication &#038; External Subscription"},"content":{"rendered":"<p><a href=\"http:\/\/internetofhomethings.com\/homethings\/wp-content\/uploads\/2015\/11\/mqtt.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1126\" src=\"http:\/\/internetofhomethings.com\/homethings\/wp-content\/uploads\/2015\/11\/mqtt.png\" alt=\"mqtt\" width=\"443\" height=\"114\" srcset=\"https:\/\/internetofhomethings.com\/homethings\/wp-content\/uploads\/2015\/11\/mqtt.png 443w, https:\/\/internetofhomethings.com\/homethings\/wp-content\/uploads\/2015\/11\/mqtt-300x77.png 300w\" sizes=\"auto, (max-width: 443px) 100vw, 443px\" \/><\/a><\/p>\n<p>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.<\/p>\n<p>What a great distribution system!<\/p>\n<p>Simply publish your ESP8266 sensor data once, and many subscribers can consume the information, virtually at the same time. Sweet!<\/p>\n<h4 style=\"text-align: center;\"><strong>MQTT\u00a0Basics<\/strong><\/h4>\n<p>In case you are new to MQTT, here are a few basics. MQTT\u00a0is the acronym for\u00a0message queuing telemetry transport. Now that&#8217;s a mouthful! It is essentially a protocol that follows the publish\/subscribe model to distribute information from one source to many users.<\/p>\n<p>Here&#8217;s a few links for more MQTT information:<\/p>\n<ul>\n<li><a href=\"https:\/\/en.wikipedia.org\/wiki\/MQTT\" target=\"_blank\">MQTT wikipedia<\/a><\/li>\n<li><a href=\"http:\/\/mosquitto.org\/\" target=\"_blank\">Mosquitto MQTT Broker<\/a><\/li>\n<li><a href=\"http:\/\/mqtt.org\/faq\" target=\"_blank\">MQTT FAQ<\/a><\/li>\n<\/ul>\n<p>I&#8217;ve put together\u00a0an ESP8266 MQTT demo project using an\u00a0Arduino 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&#8230;<\/p>\n<h4 style=\"text-align: center;\"><strong>MQTT Broker\/Server<\/strong><\/h4>\n<p>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 &#8220;topic&#8221; can subscribe to the data, it works great for a proving out your design.<\/p>\n<p><strong>server:<\/strong> test.mosquitto.org<\/p>\n<p><strong>port:<\/strong> 1883<\/p>\n<h4 style=\"text-align: center;\"><strong>Arduino IDE Sketch<\/strong><\/h4>\n<p>There is one library that needs to be added to the Arduino IDE to access the MQTT broker. It&#8217;s called &#8220;PubSubClient&#8221;. Here is how to install it&#8230;<\/p>\n<p>Step 1: Open the Arduino IDE<\/p>\n<p>Step 2: From the menu, select Sketch&gt;Include Library&gt;Manage Libraries&#8230;<\/p>\n<p>Step 3: Enter &#8220;PubSubClient&#8221; in the search box.<\/p>\n<p><a href=\"http:\/\/internetofhomethings.com\/homethings\/wp-content\/uploads\/2015\/11\/PubSubClient.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-1131 size-full\" src=\"http:\/\/internetofhomethings.com\/homethings\/wp-content\/uploads\/2015\/11\/PubSubClient.jpg\" alt=\"PubSubClient\" width=\"786\" height=\"443\" srcset=\"https:\/\/internetofhomethings.com\/homethings\/wp-content\/uploads\/2015\/11\/PubSubClient.jpg 786w, https:\/\/internetofhomethings.com\/homethings\/wp-content\/uploads\/2015\/11\/PubSubClient-300x169.jpg 300w\" sizes=\"auto, (max-width: 786px) 100vw, 786px\" \/><\/a><\/p>\n<p>Step 4: Click on the &#8220;Install&#8221; button<\/p>\n<p>Now that was easy.<\/p>\n<p>Great!<\/p>\n<p>But there is one more thing to do \u00a0after installing PubSubClient. I have found that the default maximum packet size (128 bytes) is insufficient. You should at least double it to 256 bytes.<\/p>\n<p>How?<\/p>\n<p>Just open the file &#8220;&#8230;\/Arduino\/libraries\/pubSubClient\/src\/PubSubClient.h and change the following line:<\/p>\n<p>From:<\/p>\n<p>#define MQTT_MAX_PACKET_SIZE\u00a0128<\/p>\n<p>To:<\/p>\n<p>#define MQTT_MAX_PACKET_SIZE 256<\/p>\n<p>Now lets talk about the sketch to test MQTT with the ESP8266&#8230;<\/p>\n<p>The setup() function performs 3 basic tasks:<\/p>\n<p>Setup()<\/p>\n<ul>\n<li>setup serial port<\/li>\n<li>connect to wifi<\/li>\n<li>set\u00a0MQTT broker\/server<\/li>\n<\/ul>\n<p>And loop() maintains the Wifi and MQTT connections, reads the sensors, and publishes the values to the MQTT broker.<\/p>\n<p>Loop()<\/p>\n<ul>\n<li>Reconnect to WiFi if disconnected<\/li>\n<li>Reconnect to MQTT broker\/server if disconnected<\/li>\n<li>Read Sensor(s)<\/li>\n<li>Publish Sensor data<\/li>\n<\/ul>\n<p>Here is a break-down of the sketch. First, the objects must be identified<\/p>\n<pre class=\"easycode; title:;lang:;\">#include\u00a0&lt;ESP8266WiFi.h&gt;\r\n#include\u00a0&lt;PubSubClient.h&gt;\r\n\r\n#define\u00a0wifi_ssid\u00a0\"Your SSID\"\r\n#define\u00a0wifi_password\u00a0Your Wifi password\"\r\n\r\n#define\u00a0mqtt_server\u00a0\"test.mosquitto.org\"\r\n#define\u00a0mqtt_user\u00a0\"not used in this example\"\r\n#define\u00a0mqtt_password\u00a0\"not used in this example\"\r\n\r\n#define\u00a0topic1\u00a0\"t1\"\r\n#define\u00a0topic2\u00a0\"t2\"\r\n\r\nWiFiClient\u00a0espClient;\r\nPubSubClient\u00a0client(espClient);<\/pre>\n<p>And then the sketch setup&#8230;<\/p>\n<pre class=\"easycode; title:;lang:;\"> void\u00a0setup()\u00a0{\r\n\u00a0\u00a0 Serial.begin(115200);\r\n\u00a0\u00a0 setup_wifi();\r\n\u00a0\u00a0 client.setServer(mqtt_server,\u00a01883);\r\n}<\/pre>\n<p>A typical Wifi connect function:<\/p>\n<pre class=\"easycode; title:;lang:;\"> void\u00a0setup_wifi()\u00a0{\r\n\u00a0\u00a0 delay(10);\r\n\u00a0\u00a0 \/\/\u00a0We\u00a0start\u00a0by\u00a0connecting\u00a0to\u00a0a\u00a0WiFi\u00a0network\r\n\u00a0\u00a0 Serial.println();\r\n\u00a0\u00a0 Serial.print(\"Connecting\u00a0to\u00a0\");\r\n\u00a0\u00a0 Serial.println(wifi_ssid);\r\n\r\n\u00a0 \u00a0WiFi.begin(wifi_ssid,\u00a0wifi_password);\r\n\r\n\u00a0\u00a0 while\u00a0(WiFi.status()\u00a0!=\u00a0WL_CONNECTED)\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0 delay(500);\r\n\u00a0\u00a0\u00a0\u00a0 Serial.print(\".\");\r\n\u00a0 \u00a0}\r\n\r\n\u00a0 \u00a0Serial.println(\"\");\r\n\u00a0 \u00a0Serial.println(\"WiFi\u00a0connected\");\r\n\u00a0\u00a0 Serial.println(\"IP\u00a0address:\u00a0\");\r\n\u00a0 \u00a0Serial.println(WiFi.localIP());\r\n}<\/pre>\n<p>The loop() simply makes sure a connection to the\u00a0MQTT is made, reads the sensors, and publishes the results. The publish rate is set at 2 seconds minimum.<\/p>\n<pre class=\"easycode; title:;lang:;\"> void\u00a0loop()\u00a0{\r\n\u00a0\u00a0if\u00a0(!client.connected())\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0reconnect();\r\n\u00a0\u00a0}\r\n\u00a0\u00a0client.loop();\r\n\r\n\u00a0\u00a0\/\/2\u00a0seconds\u00a0minimum\u00a0between\u00a0Read\u00a0Sensors\u00a0and\u00a0Publish\r\n\u00a0\u00a0long\u00a0now\u00a0=\u00a0millis();\r\n\u00a0\u00a0if\u00a0(now\u00a0-\u00a0lastMsg\u00a0&gt;\u00a02000)\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0lastMsg\u00a0=\u00a0now;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/Read\u00a0Sensors\u00a0(simulated\u00a0by\u00a0increasing the values,\u00a0range:0-90)\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0t1\u00a0=\u00a0t1&gt;90\u00a0?\u00a00\u00a0:\u00a0++t1;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0t2\u00a0=\u00a0t2&gt;90\u00a0?\u00a00\u00a0:\u00a0++t2;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/Publish\u00a0Values\u00a0to\u00a0MQTT\u00a0broker\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0pubMQTT(topic1,t1);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0pubMQTT(topic2,t2);\r\n\u00a0\u00a0}\r\n}<\/pre>\n<p>Just copy\u00a0and 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 &amp; password in the sketch to your access point values before running.<\/p>\n<pre class=\"easycode; title:;lang:;\">#include\u00a0&lt;ESP8266WiFi.h&gt;\r\n#include\u00a0&lt;PubSubClient.h&gt;\r\n\r\n#define\u00a0wifi_ssid\u00a0\"YOURSSID\"\r\n#define\u00a0wifi_password\u00a0\"YOURPASSWORD\"\r\n\r\n#define\u00a0mqtt_server\u00a0\"test.mosquitto.org\"\r\n#define\u00a0mqtt_user\u00a0\"your_username\"\r\n#define\u00a0mqtt_password\u00a0\"your_password\"\r\n\r\n#define\u00a0topic1\u00a0\"t1\"\r\n#define\u00a0topic2\u00a0\"t2\"\r\n\r\nWiFiClient\u00a0espClient;\r\nPubSubClient\u00a0client(espClient);\r\n\r\nvoid\u00a0setup()\u00a0{\r\n\u00a0\u00a0  Serial.begin(115200);\r\n\u00a0\u00a0  setup_wifi();\r\n\u00a0\u00a0  client.setServer(mqtt_server,\u00a01883);\r\n}\r\n\r\nvoid\u00a0setup_wifi()\u00a0{\r\n\u00a0\u00a0  delay(10);\r\n\u00a0\u00a0  \/\/\u00a0We\u00a0start\u00a0by\u00a0connecting\u00a0to\u00a0a\u00a0WiFi\u00a0network\r\n\u00a0\u00a0  Serial.println();\r\n\u00a0\u00a0  Serial.print(\"Connecting\u00a0to\u00a0\");\r\n\u00a0\u00a0  Serial.println(wifi_ssid);\r\n\r\n\u00a0\u00a0  WiFi.begin(wifi_ssid,\u00a0wifi_password);\r\n\r\n\u00a0\u00a0  while\u00a0(WiFi.status()\u00a0!=\u00a0WL_CONNECTED)\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0    delay(500);\r\n\u00a0\u00a0\u00a0\u00a0    Serial.print(\".\");\r\n\u00a0\u00a0  }\r\n\r\n\u00a0\u00a0  Serial.println(\"\");\r\n\u00a0\u00a0  Serial.println(\"WiFi\u00a0connected\");\r\n\u00a0\u00a0  Serial.println(\"IP\u00a0address:\u00a0\");\r\n\u00a0\u00a0  Serial.println(WiFi.localIP());\r\n}\r\n\r\nvoid\u00a0reconnect()\u00a0{\r\n\u00a0\u00a0  \/\/\u00a0Loop\u00a0until\u00a0we're\u00a0reconnected\r\n\u00a0\u00a0  while\u00a0(!client.connected())\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0    Serial.print(\"Attempting\u00a0MQTT\u00a0connection...\");\r\n\u00a0\u00a0\u00a0\u00a0    \/\/\u00a0Attempt\u00a0to\u00a0connect\r\n\u00a0\u00a0\u00a0\u00a0    if\u00a0(client.connect(\"TestMQTT\"))\u00a0{ \/\/* See \/\/NOTE below\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      Serial.println(\"connected\");\r\n\u00a0\u00a0\u00a0\u00a0    }\u00a0else\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      Serial.print(\"failed,\u00a0rc=\");\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      Serial.print(client.state());\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      Serial.println(\"\u00a0try\u00a0again\u00a0in\u00a05\u00a0seconds\");\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      \/\/\u00a0Wait\u00a05\u00a0seconds\u00a0before\u00a0retrying\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0      delay(5000);\r\n\u00a0\u00a0\u00a0\u00a0    }\r\n\u00a0\u00a0  }\r\n}\r\n\/\/NOTE: if a user\/password is used for MQTT connection use:\r\n\/\/if(client.connect(\"TestMQTT\", mqtt_user, mqtt_password)) {\r\n\r\nvoid\u00a0pubMQTT(String\u00a0topic,float\u00a0topic_val){\r\n\u00a0\u00a0\u00a0\u00a0Serial.print(\"Newest\u00a0topic\u00a0\"\u00a0+\u00a0topic\u00a0+\u00a0\"\u00a0value:\");\r\n\u00a0\u00a0\u00a0\u00a0Serial.println(String(topic_val).c_str());\r\n\u00a0\u00a0\u00a0\u00a0client.publish(topic.c_str(),\u00a0String(topic_val).c_str(),\u00a0true);\r\n}\r\n\r\n\/\/Variables used in loop()\r\nlong lastMsg = 0;\r\nfloat t1 = 75.5;\r\nfloat t2 = 50.5;\r\n\r\nvoid\u00a0loop()\u00a0{\r\n\u00a0\u00a0if\u00a0(!client.connected())\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0reconnect();\r\n\u00a0\u00a0}\r\n\u00a0\u00a0client.loop();\r\n\r\n\u00a0\u00a0\/\/2\u00a0seconds\u00a0minimum\u00a0between\u00a0Read\u00a0Sensors\u00a0and\u00a0Publish\r\n\u00a0\u00a0long\u00a0now\u00a0=\u00a0millis();\r\n\u00a0\u00a0if\u00a0(now\u00a0-\u00a0lastMsg\u00a0&gt;\u00a02000)\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0lastMsg\u00a0=\u00a0now;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/Read\u00a0Sensors\u00a0(simulate\u00a0by\u00a0increasing the values,\u00a0range:0-90)\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0t1\u00a0=\u00a0t1&gt;90\u00a0?\u00a00\u00a0:\u00a0++t1;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0t2\u00a0=\u00a0t2&gt;90\u00a0?\u00a00\u00a0:\u00a0++t2;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/Publish\u00a0Values\u00a0to\u00a0MQTT\u00a0broker\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0pubMQTT(topic1,t1);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0pubMQTT(topic2,t2);\r\n\u00a0\u00a0}\r\n}<\/pre>\n<h4 style=\"text-align: center;\"><strong>Testing Tools<\/strong><\/h4>\n<p>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.<\/p>\n<p>How?<\/p>\n<p>Simply subscribe to the topic and watch the information updates in real-time.<\/p>\n<p style=\"text-align: center;\"><b>Google Chrome Application<\/b><\/p>\n<p>First try using MQTTLens, an off-the-shelf tool to subscribe to the published data. You can get MQTTLens <a href=\"https:\/\/chrome.google.com\/webstore\/detail\/mqttlens\/hemojaaeigabkbcookmlgmdigohjobjm\" target=\"_blank\">here<\/a>.\u00a0Although 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.<\/p>\n<p>This app provides basic functionality for testing MQTT publish\/subscribe messages.<\/p>\n<p>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.<\/p>\n<p style=\"text-align: left;\">Just click on the configuration icon and fill in the information as shown below:<br \/>\n<a href=\"http:\/\/internetofhomethings.com\/homethings\/wp-content\/uploads\/2015\/11\/mqttlenssetup.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-1139 size-full\" src=\"http:\/\/internetofhomethings.com\/homethings\/wp-content\/uploads\/2015\/11\/mqttlenssetup.jpg\" alt=\"mqttlenssetup\" width=\"1311\" height=\"832\" srcset=\"https:\/\/internetofhomethings.com\/homethings\/wp-content\/uploads\/2015\/11\/mqttlenssetup.jpg 1311w, https:\/\/internetofhomethings.com\/homethings\/wp-content\/uploads\/2015\/11\/mqttlenssetup-300x190.jpg 300w, https:\/\/internetofhomethings.com\/homethings\/wp-content\/uploads\/2015\/11\/mqttlenssetup-1024x650.jpg 1024w\" sizes=\"auto, (max-width: 1311px) 100vw, 1311px\" \/><\/a><br \/>\nOnce 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.<br \/>\n<a href=\"http:\/\/internetofhomethings.com\/homethings\/wp-content\/uploads\/2015\/11\/mqqtlens_subscribe.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-1140 size-full\" src=\"http:\/\/internetofhomethings.com\/homethings\/wp-content\/uploads\/2015\/11\/mqqtlens_subscribe.jpg\" alt=\"mqqtlens_subscribe\" width=\"807\" height=\"711\" srcset=\"https:\/\/internetofhomethings.com\/homethings\/wp-content\/uploads\/2015\/11\/mqqtlens_subscribe.jpg 807w, https:\/\/internetofhomethings.com\/homethings\/wp-content\/uploads\/2015\/11\/mqqtlens_subscribe-300x264.jpg 300w\" sizes=\"auto, (max-width: 807px) 100vw, 807px\" \/><\/a><br \/>\nNotice you can change the number of messages displayed using the &#8220;-+&#8221; icons.<\/p>\n<p style=\"text-align: center;\"><strong>Web Page using JavaScript<\/strong><\/p>\n<p style=\"text-align: left;\">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.<br \/>\nFortunately, this is a simple task using only JavaScript and html.<br \/>\nI&#8217;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 &#8220;.html&#8221; as the file name extension. In this example, I have named the file &#8220;mqtt_subscribe.html&#8221;.<\/p>\n<pre class=\"easycode; title:;lang:;\">&lt;!DOCTYPE html&gt;\t \t \r\n&lt;html&gt;\t \t \r\n &lt;head&gt;\t \t \r\n &lt;title&gt;MQTT JavaScript Client Example&lt;\/title&gt;\t \t \r\n &lt;!-- Latest compiled and minified CSS - add here as needed --&gt;\t \t \r\n &lt;\/head&gt;\t \t \r\n &lt;body&gt;\t \t \r\n &lt;!-- HTML to display MQTT topic values --&gt;\t \t \r\n &lt;div&gt;&lt;strong&gt;Published ESP8266 topics via MQTT:&lt;\/strong&gt;&lt;\/div&gt;&lt;br&gt;\t \t \r\n &lt;div id=\"t1\"&gt;&lt;\/div&gt;\t \t \r\n &lt;div id=\"t2\"&gt;&lt;\/div&gt;\t \t \r\n &lt;!-- mosquitto MQTT --&gt;\t \t \r\n &lt;script type=\"text\/javascript\" src=\"http:\/\/test.mosquitto.org\/mosquitto.js\"&gt;&lt;\/script&gt;\t \t \r\n &lt;!-- jQuery --&gt;\t \t \r\n &lt;script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.11.2\/jquery.min.js\"&gt;&lt;\/script&gt;\t \t \r\n &lt;!-- Custom MQTT client for this example --&gt;\t \t \r\n &lt;script&gt;\t \t \r\n \/\/ Create a client instance\t \t \r\n client = new Mosquitto();\t \t \r\n \/\/ Connect to MQTT broker\t \t \r\n var url = \"ws:\/\/test.mosquitto.org:8080\/mqtt\";\t \t \r\n client.connect(url);\t \t \r\n \/\/ Callback executed upon connection\t \t \r\n client.onconnect = function(rc){\t \t \r\n var topic = 't1';\t \t \r\n client.subscribe('t1', 0);\t \t \r\n client.subscribe('t2', 0);\t \t \r\n };\t \t \r\n \/\/Callback executed upon disconnection\t \t \r\n client.ondisconnect = function(rc){\t \t \r\n client.connect(url);\t \t \r\n };\t \t \r\n \/\/Callback executed upon receipt of MQTT message\t \t \r\n client.onmessage = function(topic, payload, qos){\t \t \r\n if(topic==\"t1\") {\t \t \r\n $(\"#t1\").html(\"Topic: t1 Value: \" + payload);\t \t \r\n }\t \t \r\n if(topic==\"t2\") {\t \t \r\n $(\"#t2\").html(\"Topic: t2 Value: \" + payload);\t \t \r\n }\t \t \r\n };\t \t \r\n &lt;\/script&gt;\t \t \r\n &lt;\/body&gt;\t \t \r\n&lt;\/html&gt;<\/pre>\n<p style=\"text-align: left;\">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:<\/p>\n<p style=\"text-align: left;\"><a href=\"http:\/\/internetofhomethings.com\/homethings\/wp-content\/uploads\/2015\/11\/mqqt_javascript_.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1154\" src=\"http:\/\/internetofhomethings.com\/homethings\/wp-content\/uploads\/2015\/11\/mqqt_javascript_.jpg\" alt=\"mqqt_javascript_\" width=\"402\" height=\"217\" srcset=\"https:\/\/internetofhomethings.com\/homethings\/wp-content\/uploads\/2015\/11\/mqqt_javascript_.jpg 402w, https:\/\/internetofhomethings.com\/homethings\/wp-content\/uploads\/2015\/11\/mqqt_javascript_-300x162.jpg 300w\" sizes=\"auto, (max-width: 402px) 100vw, 402px\" \/><\/a><\/p>\n<h4 style=\"text-align: center;\"><strong>Android<\/strong><\/h4>\n<p style=\"text-align: left;\">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.<br \/>\n<a href=\"http:\/\/wp.me\/p5NRQ8-aH\" target=\"_blank\"><strong>Here<\/strong> <\/a>is my step-by-step guide to get started.<br \/>\nBut 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.<br \/>\nThe App will startup with the following screen:<br \/>\n<a href=\"http:\/\/internetofhomethings.com\/homethings\/wp-content\/uploads\/2015\/11\/Mymqtt_main.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-1146 size-medium\" src=\"http:\/\/internetofhomethings.com\/homethings\/wp-content\/uploads\/2015\/11\/Mymqtt_main-271x300.jpg\" alt=\"Mymqtt_main\" width=\"271\" height=\"300\" srcset=\"https:\/\/internetofhomethings.com\/homethings\/wp-content\/uploads\/2015\/11\/Mymqtt_main-271x300.jpg 271w, https:\/\/internetofhomethings.com\/homethings\/wp-content\/uploads\/2015\/11\/Mymqtt_main-926x1024.jpg 926w, https:\/\/internetofhomethings.com\/homethings\/wp-content\/uploads\/2015\/11\/Mymqtt_main.jpg 1079w\" sizes=\"auto, (max-width: 271px) 100vw, 271px\" \/><\/a><br \/>\nFirst set the app to connect with the broker we are using for this example. Click on &#8220;Settings&#8221; and enter the broker information as shown:<br \/>\n<a href=\"http:\/\/internetofhomethings.com\/homethings\/wp-content\/uploads\/2015\/11\/Mymqtt_setup.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-1147\" src=\"http:\/\/internetofhomethings.com\/homethings\/wp-content\/uploads\/2015\/11\/Mymqtt_setup-279x300.jpg\" alt=\"Mymqtt_setup\" width=\"279\" height=\"300\" srcset=\"https:\/\/internetofhomethings.com\/homethings\/wp-content\/uploads\/2015\/11\/Mymqtt_setup-279x300.jpg 279w, https:\/\/internetofhomethings.com\/homethings\/wp-content\/uploads\/2015\/11\/Mymqtt_setup-951x1024.jpg 951w, https:\/\/internetofhomethings.com\/homethings\/wp-content\/uploads\/2015\/11\/Mymqtt_setup.jpg 1071w\" sizes=\"auto, (max-width: 279px) 100vw, 279px\" \/><\/a><br \/>\nThen subscribe to the ESP8266 published topics (t1 and t2):<br \/>\n<a href=\"http:\/\/internetofhomethings.com\/homethings\/wp-content\/uploads\/2015\/11\/Mymqtt_subscribe.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-1149\" src=\"http:\/\/internetofhomethings.com\/homethings\/wp-content\/uploads\/2015\/11\/Mymqtt_subscribe-300x245.jpg\" alt=\"Mymqtt_subscribe\" width=\"300\" height=\"245\" srcset=\"https:\/\/internetofhomethings.com\/homethings\/wp-content\/uploads\/2015\/11\/Mymqtt_subscribe-300x245.jpg 300w, https:\/\/internetofhomethings.com\/homethings\/wp-content\/uploads\/2015\/11\/Mymqtt_subscribe-1024x836.jpg 1024w, https:\/\/internetofhomethings.com\/homethings\/wp-content\/uploads\/2015\/11\/Mymqtt_subscribe.jpg 1069w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><br \/>\nThe dashboard will then display the topic data as it is published:<br \/>\n<a href=\"http:\/\/internetofhomethings.com\/homethings\/wp-content\/uploads\/2015\/11\/Mymqtt_messages.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-1151\" src=\"http:\/\/internetofhomethings.com\/homethings\/wp-content\/uploads\/2015\/11\/Mymqtt_messages-300x253.jpg\" alt=\"Mymqtt_messages\" width=\"300\" height=\"253\" srcset=\"https:\/\/internetofhomethings.com\/homethings\/wp-content\/uploads\/2015\/11\/Mymqtt_messages-300x253.jpg 300w, https:\/\/internetofhomethings.com\/homethings\/wp-content\/uploads\/2015\/11\/Mymqtt_messages-1024x863.jpg 1024w, https:\/\/internetofhomethings.com\/homethings\/wp-content\/uploads\/2015\/11\/Mymqtt_messages.jpg 1074w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<h4 style=\"text-align: center;\"><strong>Iphone\/iPad<\/strong><\/h4>\n<p style=\"text-align: left;\">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 <strong><a href=\"https:\/\/itunes.apple.com\/us\/app\/mqttinspector\/id758868884?mt=8\" target=\"_blank\">here<\/a><\/strong>.<\/p>\n<h4 style=\"text-align: center;\"><strong>In Conclusion<\/strong><\/h4>\n<p>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.<\/p>\n<p>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.<\/p>\n<p>As always, I hope you find this information useful&#8230;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 &hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,10,19],"tags":[89,92,88,90,91],"class_list":["post-1121","post","type-post","status-publish","format-standard","hentry","category-alltheposts","category-esp8266","category-internet-of-things","tag-esp8266-mqtt-example","tag-esp9266-mqtt-publication","tag-mqtt","tag-mqtt-client-tools","tag-mqtt-javascript"],"_links":{"self":[{"href":"https:\/\/internetofhomethings.com\/homethings\/index.php?rest_route=\/wp\/v2\/posts\/1121","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/internetofhomethings.com\/homethings\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/internetofhomethings.com\/homethings\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/internetofhomethings.com\/homethings\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/internetofhomethings.com\/homethings\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1121"}],"version-history":[{"count":42,"href":"https:\/\/internetofhomethings.com\/homethings\/index.php?rest_route=\/wp\/v2\/posts\/1121\/revisions"}],"predecessor-version":[{"id":1347,"href":"https:\/\/internetofhomethings.com\/homethings\/index.php?rest_route=\/wp\/v2\/posts\/1121\/revisions\/1347"}],"wp:attachment":[{"href":"https:\/\/internetofhomethings.com\/homethings\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1121"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/internetofhomethings.com\/homethings\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1121"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/internetofhomethings.com\/homethings\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1121"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}