Raspberry Piでセンシングしたデータの通信をfirebaseの代わりにpusher.jsを使ってみた。


昨日「Raspberry Piでセンシングした温度を、firebaseとchart.jsを使ってリアルタイムグラフにしてみる」と称して、記事を書きましたが、もっと簡単な方法が無いかなと模索しておりましたら、Pusherと言うサービスを発見しました。

結果としては、同じものが出来上がるのですが、それまでのプロセスが違ってきます。簡単にやりたい人は、こちらの方が良いかもしれません。

 

 Raspberry Piを使った実験の準備

このお遊びで使った物

Raspberry Piで作る室温管理IoT/DIYキット

Raspberry Pi 3 Model B

Puhser

Chart.js

 

このお遊びで参考にさせて頂いた資料、サイト

Bitcoin のリアルタイムチャートを Chart.js で表示する

pusherを触ってみる

 

今回のお遊びで完成した制作物(デモ)

どんな制作物が完成したか、下記のデモえご確認ください。見た目は、「Firebase」で作ったものと同じです。なお、Raspberri Pi がお休みしている時は、グラフの描写がされません。その時は、お休み中という事で、またお越しください。

室温をセンシングしてリアルタイムでグラフ化するUI

 

Raspberry Piを使った実験の流れ

Raspberry Piでセンシング

 

Iotswitchで販売しているキットとRaspberry Piをセットする事で、温度を測る事は比較的簡単にできました。

電子回路の配線は下記の様な感じです。

ただ、それはあくまでRaspberry Piの中での事なので、外部にアウトプットしてあげる必要があります。

 

センシングしたデータの受け渡し

「firebase」サービスを使用する場合、一端「firebase」のデータベースに書き込む必要がありました。

ただ、Pusherの場合は、データベースに保存する必要はなく、そのまま値を「JSON」で飛ばすだけで良いので、かなり簡略されました。

その為、温度を取得した処理の後に、「Pusher」で、データを飛ばす処理を追加するだけで、Raspberry Pi側のカスタマイズは終了です。

Pusherの登録から使い方などは、下記サイト様の情報がとても参考になりました。また、Pusherの管理画面に「Getting Started」や「Tutorials」などのページがありますので、それを見ても結構理解できます。

pusherを触ってみる

 

Pusherのデータをリアルタイムで取得

Raspberry PiのデータをPusherで飛ばしすところまでは、Raspberry Piで行い、それを取得して表示するのは、クライアント側の記述になります。

Pusherの管理画面の「Getting Started」に、下記の様なサンプルコードが表示されます。

// Enable pusher logging - don't include this in production
    Pusher.logToConsole = true;

    var pusher = new Pusher('app別のKEY', {
      cluster: 'ap1',
      encrypted: true
    });

    var channel = pusher.subscribe('my-channel');
    channel.bind('my-event', function(data) {
      alert(data.message);
    });

 

そのまま、ペタッと貼り付けて、「channel.bind(‘my-event’, function(data) {~~}の中の処理を変えれば、いろいろ出来る様になることが分かります。

 

取得したデータをリアルタイムでグラフ化する

有名なグラフ描写ライブラリ「chart.js」とそのプラグインなどを使用して、ほぼリアルタイムで取得したセンシングしたデータをグラフに描写していく処理を実施します。

この部分は、「firebase」でも「Pusher」でも、基本同じになります。

Bitcoin のリアルタイムチャートを Chart.js で表示する

 

Raspberry Piを使った実験のまとめby Pusher

Firebaseを使たったシステムの後なので、とても簡単にできた印象がありました。

最終的に、「Firebase」で構築した場合にくらべて、クライアント側のjavascriptの記述は、半分程度で済みましたので、単純にWeb socketでのリアルタイム通信を行いたい場合は、Pusherで十分の様に思います。

ただ、センシングしたデータを一時的に保管したいといったニーズがある場合は、「Firebase」になるのかなと思います。(知らないだけでPusherにもそういう機能があるかもしれませんが。)

 

以上「Raspberry Piでセンシングした温度を、Pusherとchart.jsを使ってリアルタイムグラフにしてみる」をご紹介しました。