スマートフォンであれば更新のお知らせなどにプッシュ通知を使うことができます。しかし、完全にリアルタイムという訳ではないのでチャットのようなサービスには使えません。今回はMQTT over WebSocketsを使ってスクリプトからアプリへリアルタイム通知を送る方法を紹介します。
WebSocketであればMonacaでも使える
MQTTはiOSやAndroidであればライブラリがありますが、CordovaやMonacaアプリの場合プラグインをインストールしなければなりません。しかしHTML5には似たような技術としてWebSocketが存在します。こちらを使った方がWeb標準の技術だけでリアルタイム通知が可能です。
MQTTブローカーのSangoはWebSocketにも対応しています。そこで、mBaaSからはMQTT経由でメッセージを送信し、MonacaアプリはWebSocket経由でメッセージを受け取る仕組みになります。
スクリプト側の実装
今回はデモなのでメッセージを送信するだけのデモになります。本来は受け取ったメッセージ内容をデータストアに保存し、それをMQTTでブロードキャストする形になるかと思います。各種設定情報はSangoのダッシュボードにて取得できるのでそれぞれ読み替えてください。
注意点として送信するメッセージは文字列である必要があるので、JSONをJSON.stringifyを用いて文字列に変換して送っています。
var mqtt = require('mqtt');
var userId = 'USER_ID';
var password = 'PASSWORD';
var server = 'lite.mqtt.shiguredo.jp:1883';
var channel = 'CHANNEL';
module.exports = function(req, res) {
var client = mqtt.connect(`mqtt://${userId}:${password}@${server}`)
client.on('connect', function () {
client.subscribe(`${channel}#`)
client.publish(channel, JSON.stringify({handle: "test", text: "こんにちは"}));
setTimeout(function() {
res.status(200).json({});
}, 500);
})
}
アプリ側の実装
アプリ側はMQTT over WebSocketsをサポートしたmqttwsを使います。Bowerでbower-mqttwsを検索してインストールできます。
接続周りの処理は次のようになります。
// WebSocketサーバの定義
var userId = 'USER_ID';
var password = 'PASSWORD';
var topic = 'TOPIC';
var clientId = 'test-client';
var uri = 'ws://lite.mqtt.shiguredo.jp/mqtt';
var client = new Paho.MQTT.Client(uri, clientId);
client.connect({
userName: userName,
password: password,
onSuccess: function() {
// Subscribeします
client.subscribe(topic);
},
onFailure: function(err) {
// alert("error")
console.log(err);
}
});
そしてメッセージを受け取った時には onMessageArrived が呼ばれます。受け取ったメッセージをJSON.parseでJSONオブジェクトに戻せば良いでしょう。
client.onMessageArrived = function(message) {
var data = JSON.parse(message.payloadString);
:
}
このようにメッセージをリアルタイムに受け取ることでmBaaSを使ったチャットシステムも構築できるようになります。
MQTT over WebSocketsを使えばMQTTとWebSocketの相互通信ができます。MonacaアプリではWebSocketを使えば、mBaaSからのリアルタイム通知を受け取れます。プッシュ通知とはまた違った利便性があるでしょう。皆さんのアプリ開発に活かしてください。