subscribeしたデータをwebsocketを使ってchart.jsにリアルタイムに反映させる

タイトルのまんまです。Node.jsを使います。

Node.jsでsubscribeして取得したデータをwebsocket通信でリアルタイムにChart.jsに反映させます。

 

まずは、Node.jsのプログラム部。3000番ポートのみを開放しています。

POT と COFFEE の2つのチャンネルをsubscribeします。

もしデータが来れば、websocket にemitします。(websocketに送ります)

 

次に、クライアントが開くHTMLファイルです。

websocketの通信にエラーが出ると再送はしない設計です。

Chartは2つありますが、

  • 日ごとの水入れ替え回数を1ヶ月分表示
  • これまでの水入れ替え回数を1時間単位で並べて表示

の2つです。

 

上記のHTMLファイル内のjavascript変数 phpURL の先に置くphpファイルが必要になります。

前々記事で作成したテーブルを使用して動作確認を行います。(前々記事

 

もし、header(“Access-Control-Allow-Origin: *”) の一文がなければ、javascript内から送られてきたリクエストを受けることが出来ませんので忘れないようにしましょう。

個人的にjavascriptよりPHPの方が得意なので、処理は極力PHPファイル内で行っています。

Chart.jsで必要なラベル配列やデータ配列をJSONにどんどん詰め込みます。

 

これらをサーバに置いて、

として、HTMLファイルにアクセスすれば、

 

こんな感じに出るはず。

前々回の記事のpythonアプリからpublishすれば、ここのグラフが動的に変わります。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です