MQTTクライアントをブラウザ上で動かす

最近MQTTが気になっているので、実際にクライアントを作ってブラウザ上で動かしてみました。
作ったデモはhttp://mitsuruog.github.io/what-mqtt/で動かすことが出来ます。
内容薄い記事なので、デモだけも動かしてMQTTの雰囲気感じてもらえればと思います。

ブラウザ上で動作するか検証するのが目的だったのですが、いざ作ってみたらWebページが思ったよりリッチになってしまいました。フロントエンド屋はそんなもんですよねーw

MQTTとは

MQTTはPUB/SUB型のプロトコルで、従来のHTTPより軽量・省電力であることから、センサーなどの機器で永続的に発生する小さいデータを送受信する用途に向いているとされています。もともとはIBMが仕様を作っていました。

もうすでに時雨堂さんで商用化されてますし、MQTTは仕様自体が小さいため、良質な日本語の記事が多い印象です。
次に紹介する記事を読むとなんとなく全容がわかるかと思います。

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://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://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://からws://に変わっているとこでしょうか。Brokerによってはmqtt://ws://での接続先ポートが異なる場合がありますので、ご注意ください。
また、BrokerがWebsocketに対応している必要があります。

まとめ

MQTTクライアントをブラウザ上で動かすにはWebsocketを使うという話でした。先日行われたHTML5 Conference 2015でもIoT系のセッションが多く、今年のトレンドはIoT一色だなと感じています。

デモのWebページではmosquitto社が提供するテスト用のBrokerに接続しています。チャットアプリ程度ではまだMQTTの本当の価値って気付きにくいですが、ノード側で配置さえるセンサー機器を想像すると、Topicの考え方ってマッチしているなと思う次第です。
一番身近なところではFacebook messengerでつかっているそうです。

こちらの記事も参考になりますよー。