ブラウザだけでMQTT Pub/Sub からのリアルタイムストリーミングのチャート作成

はじめに

仕事柄、今後は IoT センサが出すデータをリアルタイムに可視化するようなのをやっていかないとなぁ、と考えていて、実装のイメージを掴むため・関係者と合わせるために、こんな PoC 作ってみたという話です。ブラウザだけでもやればできる

今回の PoC の構成

• MQTT.js で Mosquitto™ のテストサーバへ Pub / Sub
• Vue.js と Chart.js でストリーミングを可視化

1. 巨人の肩の上に乗りまくり¹の構成
2. MQTTは自分で pubって、自分で subる 自作自演型（いちおう、インスタンスは分けたが）
3. Mosquitto™ のテストサーバーさまさま。多謝。

ライブデモ

Github Pages に置いてます

デモ	内容	ソースコード
Version 1	MQTT Subscriber がデータを受け取るのをトリガにチャートをリフレッシュ	GitHub
Version 2	MQTT Subscriber と Chart.js がそれぞれのタイマーでデータを待ち受け。その間を Queue でつないでいる。チャートの見栄えはいいが、タイマーが複数回っていておそらくCPU的にはよくないと思われる	GitHub

やったこと

このあたりに書いたことを組み合わせて、できあがり

• MQTT.js でブラウザから MQTTブローカ に Pub/Sub する
• Chart.js でリアルタイムストリーミングデータをグラフ化

1. 「巨人の肩の上にのる矮人」（きょじんのかたのうえにのるわいじん、ラテン語: nani gigantum umeris insidentes）という言葉は、西洋のメタファーであり、現代の解釈では、先人の積み重ねた発見に基づいて何かを発見することを指す ↩