ライブラリーの組み込み

次に、使用する MQTT ライブラリーを選定し、Web アプリに組み込みます。

Kii Cloud SDK for JavaScript で MQTT を使用するには、MQTT クライアントの機能を持った外部ライブラリーを組み込む必要があります。

このチュートリアルでは、MQTT.js と Paho での組み込み方法を説明します。どちらか一方を選択して組み込んでください。

MQTT.js を使用する場合

この方法では、Browserify を使って MQTT.js をブラウザーで実行します。MQTT.js は Node.js 上で動作するライブラリーですが、これを JS ファイルに書き出して、ブラウザーで実行できるようにします。

Node.js と npm がインストールされた PC 上で、以下のコマンドを実行します。

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

最終的に JavaScript ファイル browser-mqtt.js が生成されます。これを Web アプリに組み込みます。

一部の環境で、変換時に JS ファイル上に文字化けが発生する現象が確認されています。JavaScript のコンソール等でエラーが表示される場合は、問題箇所周辺を手操作で修正するか、Paho を使って実装するようにしてください。

Paho を使用する場合

この方法では、MQTT クライアントライブラリー Paho を利用します。Paho の Web サイトより、JavaScript client を選択し、JavaScript 用の MQTT クライアントをダウンロードします。

本チュートリアル作成時の最新版では、mqttws31.js を入手できます。このファイルを Web アプリに組み込みます。以降、ライブラリーのファイル名はダウンロードしたファイルに合わせて適時読み替えてください。

HTML ファイルの確認

ライブラリーを組み込むと、index.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="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>

Web アプリのディレクトリ上には Kii Cloud SDK の JS ファイル KiiSDK.js、初めに作成した main.js、MQTT.js の場合は browser-mqtt.js、Paho の場合は mqttws31.js があるはずです。

次のステップ受信処理の実装に進みましょう。

<< Web アプリの作成

受信処理の実装 >>