HTML5上でIoTをする時にはMQTT over WebSocketを使おう

IoT機器とHTML5を融合させればWebブラウザの画面上からIoTデバイスを操作したり、IoTからあがってくる数値をリアルタイムにレンダリングしたりすることができます。HTML5の新しい可能性が見えてくる気がしないでしょうか。

IoT機器が使うプロトコルとして注目されているのがMQTTです。最小ヘッダサイズが2byteという小ささでネットワーク帯域を浪費しないこと、相互通信が可能な仕組みがあることからIoT分野において知っておきたいプロトコルです。

そんなMQTTなのですが、PubSub型であることやTCP上に流れるとあって、WebSocketに似たような仕組みとなっています。そこで作られているのがMQTT over WebSocketで、MQTTとWebSocketを相互通信できる仕組みになります。

今回はMQTT over WebSocketに対応したMowsを使って手軽にMQTTとWebSocketを体験してみたいと思います。

Mowsのインストール

まず前提条件としてnode.jsを使うこととします。適当なフォルダを作成して、そこをプロジェクトフォルダとします。

$ mkdir mows-test
$ cd mows-test
$ npm init

初期化が終わったらMowsをインストールします。

$ npm install mows --save

サーバの立ち上げ

インストールしたら、mowsのフォルダにいきます。

$ cd node_modules/mosca/examples/ws/

そしてWebサーバを立ち上げます。

$ ./start.sh
$ ./start.sh 
       +++.+++:   ,+++    +++;   '+++    +++. 
      ++.+++.++   ++.++  ++,'+  `+',++  ++,++ 
      +`  +,  +: .+  .+  +;  +; '+  '+  +`  +` 
      +`  +.  +: ,+  `+  ++  +; '+  ;+  +   +. 
      +`  +.  +: ,+  `+   +'    '+      +   +. 
      +`  +.  +: ,+  `+   :+.   '+      +++++. 
      +`  +.  +: ,+  `+    ++   '+      +++++. 
      +`  +.  +: ,+  `+     ++  '+      +   +. 
      +`  +.  +: ,+  `+  +:  +: '+  ;+  +   +. 
      +`  +.  +: .+  .+  +;  +; '+  '+  +   +. 
      +`  +.  +:  ++;++  ++'++   ++'+'  +   +. 
      +`  +.  +:   +++    +++.   ,++'   +   +. 
[2015-09-25T08:32:51.703Z]  INFO: mosca/17687 on MacBook-Pro.local: server started (mqtt=1883, http=3000)

これで準備は完了です。ログを見て分かる通り、HTTPサーバが3000番、MQTTサーバが1883番で立ち上がっています。

Webブラウザで開いてみる

まず一つ目のブラウザで http://localhost:3000/ を開いてみます。この時点でWebSocketを通してMQTTサーバに接続しています。表示するとアラートが出るはずです。

コード（index.html）を見てみると次のようになっています。

var client = mqtt.connect();

client.subscribe("mqtt/demo");

client.on("message", function(topic, payload) {
  alert([topic, payload].join(": "));
});

client.publish("mqtt/demo", "hello world!");

var client = mqtt.connect(); はMQTTサーバへの接続処理になります。次の client.subscribe("mqtt/demo"); で購読するトピック"mqtt/demo"を指定してます。これ以外のトピックでメッセージがきても処理は行われません。

そして指定したトピックでメッセージが来た時の処理が次の行になります。

client.on("message", function(topic, payload) {
  alert([topic, payload].join(": "));
});

逆にメッセージの送信は client.publish("mqtt/demo", "hello world!"); にて行います。

複数のタブでブラウザを開くと、すべてのタブ宛にメッセージが届くはずです。

コンソールからメッセージを送ってみる

ここまでではWebSocketと同じですので、次はCLIからメッセージを送ってみます。その際にはmqttをインストールします。

$ npm install mqtt -g

そしてmqttコマンドを使ってメッセージを送信します。

$ mqtt pub -t 'mqtt/demo' -h 'localhost' -m 'from MQTT.js'

これもブラウザに受信されます。

逆に購読側になった場合、ブラウザからメッセージを送ればコンソールにメッセージが流れます。

$ mqtt sub -t 'mqtt/demo' -h 'localhost'
hello world!

まとめ

MQTT over WebSocketを使うことでWebブラウザでもMQTTを使って双方向性のあるデータのやりとりが可能になります。後はMQTTが使えるプログラミング言語を使って開発を行えば二つのシステムを連携するのも簡単です。

HTML5でIoTをぜひ試してみてください。