プッシュ通知の導入手順

Thing-IF SDK では、Thing からの応答を受け取る処理などを実装するため、プッシュ通知を利用します。

このページでは、WebSocket 上の MQTT を使ったプッシュ通知の導入手順を示しますが、Cordova を使用する場合は FCM または APNs を使ったプッシュ通知を使用することもできます。詳細は、Kii Cloud SDK の プッシュ通知 を参照してください。

Thing-IF SDK で MQTT を使用するには、MQTT クライアントの機能を持った外部ライブラリーを組み込む必要があります。MQTT プロトコルの詳細やライブラリーの利用形態については、MQTT プロトコル を参照してください。

このガイドでは、MQTT.js での組み込み方法を説明しますが、その他のライブラリーも利用できます。Paho を使う場合、JavaScript（Web）プッシュ通知設定チュートリアル に JavaScript と Kii Cloud SDK を使った実装例があるため、参考にしてください。

プッシュ通知の導入手順は、開発環境と言語の選択 で選択した方式によって異なります。

Node.js で TypeScript コードをビルドする場合

この場合、Node.js に MQTT.js を組み込み、Web アプリから import 文を使って MQTT.js の機能を利用します。

  1. 開発プロジェクトに MQTT.js と型定義ファイルを組み込みます。

    Node.js の開発プロジェクトに npm コマンドを使って MQTT.js を組み込みます。同時に、MQTT.js を TypeScript から利用できるよう、型定義ファイル（d.ts ファイル）を組み込みます。

    $ npm install mqtt --save
$ npm install @types/mqtt --save

    MQTT.js および、その型定義ファイルのインストール方法は、Kii Cloud の機能範囲外です。このコマンドで正しく組み込めない場合は、最新の設定方法を Web 等で検索してください。また、コマンドを変更した場合は、下記の import 文のパスなども必要に応じて書き換えてください。

  2. Web アプリの実装から MQTT.js の機能を使用します。

    Web アプリを実装する際には、MQTT.js の機能を使用できるよう、import を使ってライブラリーのシンボルを参照できる状態にします。

    MQTT.js の機能を使用するすべての TypeScript ファイルでは、以下の命令を実行します。

    /// <reference path="./node_modules/@types/mqtt/index.d.ts" />
import * as mqtt from 'mqtt'

MQTT.js の実装は、Web アプリを webpack などでビルドする際、JavaScript ファイルに自動的に取り込まれます。

Thing-IF SDK でのプッシュ通知の初期化方法は 初期化コードの実装 を参照してください。

JavaScript コードを直接記述する場合

この場合、MQTT.js をブラウザーで実行できるよう、Browserify を使って JS ファイルを抽出します。

  1. MQTT.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

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

  2. Web ブラウザーに組み込みます。

    生成された browser-mqtt.js を Web サーバーに配置して Web ブラウザーから読み込める状態にします。

    HTML ファイルには、以下のようなスクリプトを埋め込みます。

    <script src="scripts/browser-mqtt.js"></script>

    browser-mqtt.js のパスは、Web サーバー上での位置に合わせて書き換えてください。

  3. Web アプリの実装から MQTT.js の機能を使用します。

    MQTT.js の機能は mqtt. のプレフィックスを付けて利用できます。

Thing-IF SDK でのプッシュ通知の初期化方法は 初期化コードの実装 を参照してください。