MQTT Viewer is a simple, configurable & ready to use internet of things (IoT) client. This app has been designed to help you get started with your IoT journey. Simply configure your MQTT server details, and start receiving events in the app immediately. Great for prototyping!

Learning Objectives

At the end of this post you will be able to:

Disclaimer: is a publicly available instance of MQTT, so the data you publish might be available to others.

App Configurations

Step 1: Download MQTT Viewer from Play Store.

Step 2: Open MQTT Viewer and select Settings from the toolbar.

Step 3: In order to configure a new MQTT server, click on Server.

Step 4: Tap on the Host setting to edit. Enter and click Ok.

Step 5: Tap on the Port setting to edit. Enter 1883 and click Ok.

Step 6: Tap on the Topic setting to edit. Enter your topic name here, for this post we are using codifythings/mqtt and click Ok.

Step 7: Tap on the Device setting to edit. Enter your device name, for this post we are using androidClient and click Ok.

Since this is a publicly available instance of MQTT so it does not require authentication. Leave UsernamePassword and QoS fields as-is. Your Server settings should look similar to the screenshot below.

Adeel Javed - IoT Prototyping Mobile App - MQTT Viewer

Step 8: Click on the back button, and go to Message setting.

Step 9: If you are sending plain data, then leave the setting as-is i.e. do not enable JSON format and skip step 10. If you are publishing data to MQTT server in JSON format, then enable this setting and follow step 10.

Step 10: Tap on the Data Key setting to edit. You need to specify which field in the JSON message contains your data. For this tutorial, we are using humidity and click Ok. For example, if the message being published to MQTT server was {temperature: 45, humidity: 35}, then by specifying humidity in Data Key we are asking the app to use its value which in this case will be 35.

Your Message settings should look similar to the screenshot below.

Adeel Javed - IoT Prototyping Mobile App - MQTT Viewer

Step 11: (Optional) Click on the back button and go to Notifications setting.

Step 12: (Optional) If you want the app to create a notification, then enable this setting.

As soon as you go back to the main screen, the app will connect to the new MQTT server settings (in the case of an error, a snack bar will be displayed with the error message). For this tutorial, we also configured the title, color theme, icon and data visualization, screenshot below shows the final product. If you want to change the color theme, icon or data visualization look at rest of the settings here.

Adeel Javed - IoT Prototyping Mobile App - MQTT Viewer


Adeel Javed - IoT Prototyping Mobile App - MQTT Viewer

Disclaimer: This mobile app has only been designed for prototyping purposes, and is not production ready.