Using MqTT on Apache Cordova

A great combination to try!!

Update

  1. v0.2.9 is released. New features added.

MqTT (Message Queuing Telemetry Transport) protocol was launched with wide support via multiple languages like Python, C, Java, Javascript, PHP etc. Now considering Javascript, it was observed that HTML5 Websockets had to supported by the running environment. So it could’ve been an obvious choice for Apache Cordova. But the webview component which is the underlying base of Apache Cordova framework, provides support to Websockets if the webview is updated enough to support WebSockets. Plus it runs on JavascriptCore which again creates an overhead on the webview component. By using a native plugin, we can utilise the native features of the platform and access the MQTT specific functions via Javascript, without utilizing much of JavascriptCore.

At Arcoiris Labs we have developed a simple MQTT plugin for Apache Cordova for Android and Windows Phone (still under development). Here is the link.

https://github.com/arcoirislabs/cordova-plugin-mqtt

The instructions to install are covered in ReadMe file. However we will be following a tutorial to actually spin off a working MqTT based app in Apache Cordova supporting any app above Android 4.0 & Windows Phone OS 8.1.

  1. Node.js
  2. GitHub
  3. Apache Cordova CLI toolchain
  4. Android developer environment/Visual Studio 2013.

If you do not have Cordova installed on your machine, you can install it by this command, assuming you have Node.js installed. This command works on all the operating systems

Once you install Cordova, create a project by any name you wish. We will place it in a folder named mqtt with the reverse ID of the app as com.app.mqtt with the app’s name as “MqTT Test” by following command. Now add a platform in the project. As our plugin supports Android and Windows Phone, we are going to add Android platform for example.

If you wish to add more platforms, you can add “ios” or “wp8” instead of android in the CLI. Now we are going to install the plugin in the project. To add the plugin, use following command. Remember, you need to have git binary in your path. So make sure you have GitHub app installed on your Windows machine, and add the git.exe in the global path. For Linux, you can install git-core package from the repository. Once you have the binary in your path, you can proceed with this step.

Now assuming no errors were observed. Build the project to fetch the plugin’s dependencies.

Remember, you need to be connected to internet while building the project only for the first time to download the nifty Android library of MQTT. Now once the project is build, open the index.js located in www/js/index.js. Update your index.js to this. To add more granular configuration, please refer to documentation in README on our Github Repository

Update :- We have added a sample app code in our repository. Do check it out.

index.js

index.html

To view the index.html code, click here

Once you are done, you have actually created a nifty MQTT test app that can give a basic tool to check your MQTT communication. In order to run the app simply type this command to run this app on your device/emulator.

Voila!! The app can now enter the world of MQTT officially. We have developed the plugin , as per the Apache Cordova’s Plugin Guidelines, using safe threads that will give you a unhindered experience without blocking the WebCore thread. Hence no lag will be experienced when using this plugin. Plus we have also implemented the Javascript’s Event based callbacks if you do not wish to be confined to the scope of plugin’s method’s callbacks.

You can also maintain the connection to the server by using the Cordova’s official Network Information Plugin by listening to their “offline” and “online” events.

Please comment us down below if you experience any issue or have any suggestion for a feature or workaround. Your inputs will be extremely appreciated. If you wish to fork this plugin repository, feel free to fork it and please try to contribute to this repository. We are actually looking for an iOS developer to develop the iOS version of this plugin.

Cheers!!

Specialized in developing Intelligent Smartphone Applications

Specialized in developing Intelligent Smartphone Applications