MQTT Toolbox – MQTT Client Chrome App

Guest blog post by: Sathya Vikram

Short Profile

Type Chrome App
License Free and Open source
Operating Systems Windows, Linux & MacOSX
Website https://github.com/workswithweb/mqtt_chrome_app

Description

We didn’t had many tools to debug MQTT messages. Existing tools were OS dependent or were not actively developed.
So I chose to develop the Chrome app. After launching on chrome store, they were number of requests coming in to add new features, so as of Feb 22 2016, I decided to rewrite the entire application and make it open source. The existing code is on Github and new code will be written on top of it. I am actively rewriting the app using Angular 2 and Bootstrap to support multiple platforms. My current plan would be to reuse the same code and Apache Cordova to develop mobile apps for MQTT client. All parts are open source, contributions, help and suggestions are always welcome.

Feature Overview

MQTT 3.1 ok
MQTT 3.1.1 ok
LWT ok
SSL/TLS nok
Automatic Reconnect ok
MQTT over TCP ok
QoS 0 ok
QoS 1 ok
QoS 2 ok
Authentication ok
Scripting nok
MQTT over Websockets ok

Usage / Features

  1. Easy to install via chrome store supporting Chrome OS, Linux, Mac OS,Windows
  2. Add multiple brokers.
  3. View brokers status (online/offline) just by color code.
  4. Brokers are auto connected when online.
  5. Send MQTT messages to broker.
  6. Save sent history
  7. Subscribe to multiple topics simultaneously in different portlets.
  8. Copy/Paste messages from history
  9. Save subscribe message history

Upcoming Features in new release

  1. Sync your broker settings and history between different machines with sign in.
  2. Separate dashboard tab to view all messages on broker and status.
  3. Redesigned UI.
  4. Help pages.
  5. Bug fixes.

Installing From Chrome Store

You can download app from chrome store.

clientchromeapp1

Add multiple brokers

Click on “Add Connection” button to add a broker. A Settings popup opens to add your connection details. You can add any number of brokers.

clientchromeapp2

Add broker setting when you click on “Add Connection” Button.

Below screenshot shows the connection settings popup when you click on the “Add Connection” button.

clientchromeapp3

Broker List

You can add multiple brokers as shown in the screenshot below. All brokers added are shown at the top of the page beside the “Add connection” button. Brokers shown in GREEN are online and RED indicates they are offline.

clientchromeapp4

Publishing message and viewing History

You can publish messages to multiple brokers selecting from list and view history as shown below.

clientchromeapp5

Subscribe to Topic

Click on “Subscribe to New Topic” to open below pop up. You can select a broker and topic name. You can subscribe to any number of topics from different brokers simultaneously and view subscribed messages in real time.

clientchromeapp6

Subscribed to multiple topics and view history

As shown in below screenshot, you can subscribe to multiple topics from different brokers and view messages in real time on the same screen simultaneously.

chromeclientapp7

Author Information

Sathya_Vikram
Sathya Vikram | workswithweb.com
mail  Email
  Website

Leave a Reply

Your email address will not be published. Required fields are marked *