--- title: AWS IoTのMQTT over WebSocketを使ってHTMLでsubscribeしたデータをリアルタイムグラフ化する tags: AWS awsIoT websocket d3.js author: horike37 slide: false --- ## 概要 AWS IoT Device Gatewayにpublishしたデータをwebsocket経由でブラウザでsubscribeして、グラフ化します。 ## Publisher topic_2というトピックに対して、0,1,2,3とカウントアップしたデータをpublishします。 ```js var count = 0; const minimumDelay = 250; timeout = setInterval(function() { count++; device.publish('topic_2', JSON.stringify({ mode1Process: count })); }, minimumDelay); ``` ## Subscriber [AWS IoTのMQTT over WebSocketにHTMLから接続してみた](http://dev.classmethod.jp/cloud/aws/aws-iot-mqtt-over-websocket/) を参考にブラウザからwebsocketでデータをsubscribeします。 リアルタイムなグラフ可視化は[Epoch](http://epochjs.github.io/epoch/)というD3.jsベースのライブラリを使います。 ソースは以下の通り ```js
``` ## 結果 こんな感じでリアルタイムにグラフが描画されます [![AWS IoTのMQTT over WebSocketでHTMLでsubscribeしたデータをリアルタイムグラフ化する](https://i.ytimg.com/vi/CbwtFvRbL0I/hqdefault.jpg)](https://www.youtube.com/watch?v=CbwtFvRbL0I)