ライブラリーの組み込み

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

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

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

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 アプリの作成 受信処理の実装 >>