MQTTクライアントをブラウザ上で動かす
最近 MQTT が気になっているので、実際にクライアントを作ってブラウザ上で動かしてみました。
作ったデモはhttps://mitsuruog.github.io/what-mqtt/で動かすことが出来ます。
内容薄い記事なので、デモだけも動かして MQTT の雰囲気感じてもらえればと思います。
ブラウザ上で動作するか検証するのが目的だったのですが、いざ作ってみたら Web ページが思ったよりリッチになってしまいました。フロントエンド屋はそんなもんですよねー w
MQTT とは
MQTT は PUB/SUB 型のプロトコルで、従来の HTTP より軽量・省電力であることから、センサーなどの機器で永続的に発生する小さいデータを送受信する用途に向いているとされています。もともとは IBM が仕様を作っていました。
もうすでに時雨堂さんで商用化されてますし、MQTT は仕様自体が小さいため、良質な日本語の記事が多い印象です。 次に紹介する記事を読むとなんとなく全容がわかるかと思います。
- IoT に最適化された MQTT プロトコルとそれを実現する技術(PDF)
- MQTT についてのまとめ — そこはかとなく書くよん。
- Mosquitto(MQTT)を動かしてみた - 人と技術のマッシュアップ
- 初めての MQTT
- MQTT と JavaScript - @ledsun blog
Node で動かす
フロントエンドエンジニアが最も簡単に MQTT を動かすためには、Node.js 上でmqttjs/MQTT.jsを使うのが一番簡単だと思います。モジュールをnpm installして、少しスクリプトを書くと動きます。
1
npm install mqtt --save
hello_mqtt.js
1
2
3
4
5
6
7
8
9
10
11
12
var mqtt = require("mqtt");
var client = mqtt.connect("mqtt:https://test.mosquitto.org");
client.subscribe("presence");
client.publish("presence", "Hello mqtt");
client.on("message", function (topic, message) {
// message is Buffer
console.log(message.toString());
});
client.end();
MQTT on Websocket
Node.js 上では簡単に動作する MQTT ですが、ブラウザ上で動作するためには MQTT を Websocket で置き換えて動かすのが一般的のようです。
軽量で双方向通信を得意としているということで、Websocket と機能的に被るところがあると思っていたのですが、Websocket vs MQTTの関係ではなく、ブラウザ上では仲良く共存させるようです。
MQTT は TCP/IP 上で動作して HTTP と同列なので、よく考えれば当然だったのですが。。。
Websocket の上を MQTT が走ることですべてのブラウザが MQTT デバイスになることができます。そんな凄い未来なのかイマイチ想像できませんが・・・今回はmcollina/mowsを使いました。
1
2
3
4
5
6
7
8
9
10
11
12
var mows = require("mows");
var client = mows.createClient("ws:https://test.mosquitto.org:8080/mqtt");
client.subscribe("presence");
client.publish("presence", "Hello mqtt");
client.on("message", function (topic, message) {
// message is Buffer
console.log(message.toString());
});
client.end();
Node.js で動かしたときとあまり大差ないですね。mowsは内部的にMQTT.jsの API をコールしています。
注意する点としては接続先のプロトコルがmqtt:https://からws://に変わっているとこでしょうか。Broker によってはmqtt:https://とws://での接続先ポートが異なる場合がありますので、ご注意ください。
また、Broker が Websocket に対応している必要があります。
まとめ
MQTT クライアントをブラウザ上で動かすには Websocket を使うという話でした。先日行われたHTML5 Conference 2015でも IoT 系のセッションが多く、今年のトレンドは IoT 一色だなと感じています。
デモの Web ページでは mosquitto 社が提供するテスト用の Broker に接続しています。チャットアプリ程度ではまだ MQTT の本当の価値って気付きにくいですが、ノード側で配置さえるセンサー機器を想像すると、Topic の考え方ってマッチしているなと思う次第です。
一番身近なところでは Facebook messenger でつかっているそうです。
こちらの記事も参考になりますよー。