Integrate a Library

Next, let us select and integrate an MQTT library into your web app.

You need to integrate an external library which works as an MQTT client in order to use MQTT with the Kii Cloud SDK for JavaScript.

This tutorial covers scenarios with MQTT.js and Paho. Select either of them to integrate into your web app.

Integrating MQTT.js

In order to run the MQTT.js with Browserify on the browser, convert the MQTT.js, which runs on Node.js, to a JS file which runs on the browser.

Run the following commands on a PC where Node.js and npm are installed:

$ npm install -g browserify
$ npm install mqtt
$ cd node_modules/mqtt
$ npm install .
$ browserify mqtt.js -s mqtt > browser-mqtt.js

A JavaScript file, browser-mqtt.js will be generated. Incorporate this file into your web app.

It has been observed that JS files get garbled during conversion in some environments. If you see errors in the JavaScript console or other tools, fix problems manually. Otherwise, use Paho.

Integrating Paho

In order to use Paho, which is an MQTT client library, download the MQTT client for JavaScript from the Paho website by selecting JavaScript client.

Incorporate the Paho JS file into your web app. Mqttws31.js was available when this tutorial was developed. Replace the file name with the one that you downloaded in the following sample codes.

Checking the HTML file

The index.html should look like this after incorporating a library:

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script type="text/javascript" src="KiiSDK.js"></script>
    <script type="text/javascript" src="browser-mqtt.js"></script>
    <script type="text/javascript" src="main.js"></script>
    <script type="text/javascript">
      window.onload = function() {
        Kii.initializeWithSite("11111111", "22222222222222222222222222222222", KiiSite.JP);
        execute();
      }
    </script>
  </head>

  <body>
    JavaScript MQTT Push Notification Tutorial
  </body>
</html>

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script type="text/javascript" src="KiiSDK.js"></script>
    <script type="text/javascript" src="mqttws31.js"></script>
    <script type="text/javascript" src="main.js"></script>
    <script type="text/javascript">
      window.onload = function() {
        Kii.initializeWithSite("11111111", "22222222222222222222222222222222", KiiSite.JP);
        execute();
      }
    </script>
  </head>

  <body>
    JavaScript MQTT Push Notification Tutorial
  </body>
</html>

The web app directory should have three of these files:

KiiSDK.js: This is the JS file of the Kii Cloud SDK.
main.js: You created this file in the previous topic.
browser-mqtt.js: You created this file if you use MQTT.js.
mqttws31.js: You downloaded this file if you use Paho.

Let us move to the next step: Implement Receive Processing

<< Create a Web App

Implement Receive Processing >>