Adding Push Notification

The Thing-IF SDK uses the push notification for receiving the response from the things.

This page covers procedures for adding the push notification with MQTT over WebSocket. If you are going to use the Cordova, you can leverage the push notification with FCM or APNs. See Managing Push Notifications in the Kii Cloud SDK Programming Guide for more information.

You need to integrate an external library which works as an MQTT client in order to use MQTT with the Thing-IF SDK. See MQTT Protocol for more information about the detail of the MQTT protocol and how to use such a library.

This guide explains how to implement push notification with MQTT.js but you can use other libraries. If you use Paho, see the implementation sample with JavaScript and the Kii Cloud SDK in JavaScript (Web) Push Notification Tutorial.

The steps to implement push notification vary depending on the method you chose in Choosing the Development Environment and Language.

If you build TypeScript code on Node.js

Incorporate MQTT.js into Node.js and use the import statement in the web app to use the functions of MQTT.js.

  1. Incorporate MQTT.js and the type definition file into the development project.

    Incorporate MQTT.js into the development project on Node.js with the npm command. Also, incorporate the type definition file (d.ts file) so that TypeScript can use MQTT.js.

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

    Installation of MQTT.js and its type definition file is not part of the Kii Cloud technology. If the above commands do not work, see web resources for the latest configuration methods. If you use different commands, rewrite the sample code such as the path of the import statement in the below sample as required.

  2. Use the functions of MQTT.js in the web app implementation.

    Make the library symbol referenceable with the import statement when you implement the web app.

    Put the below statement in all the TypeScript files which use the functions of MQTT.js.

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

The MQTT.js implementation will be automatically incorporated into the JavaScript files when you build the web app with a tool such as webback.

See Initializing and Onboarding to learn how to initialize push notification with the Thing-IF SDK.

If you write JavaScript code directly

Use Browserify to make MQTT.js available in the browser.

  1. Convert MQTT.js to a JS file which runs in the browser.

    Execute the below commands on the PC that has Node.js and npm.

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

    It is observed that garbled characters are inserted in the converted JS file in some environments. Modify such characters manually if you encounter the error on the JavaScript console and so on.

  2. Make the output file available in the web browser.

    Place the generated browser-mqtt.js file on the web server so that the web browser can load it.

    Include the below script in the HTML file.

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

    Rewrite the path of browser-mqtt.js according to its location on the web server.

  3. Use the functions of MQTT.js in the web app implementation.

    You can use the functions of MQTT.js by adding the prefix mqtt..

See Initializing and Onboarding to learn how to initialize push notification with the Thing-IF SDK.