Firebaseを使ってみたい その2

Firebaseを使ってみたい その2

こんにちは!てつです。

前回はFirebaseのRealtime Databseにデータを保存するところまで実装しました。

今回はRealtime Databseのデータを取得し、表示させます。

 

1回だけデータを取得しよう


まずはRealtime Databaseにあるデータを1回だけ取得してみます。

以下のようにデータベースにデータがあるとします。

これらのデータを1回だけ取得するにはonceメソッドを使用して取得します。

dataの中には取得したデータが格納されていると思います。

 

リアルタイムにデータを取得しよう


次はデータベースにデータが追加された場合にリアルタイムに取得するようにします。

データの変更を読み取るためにchildイベントを使用します。

今回はデータの追加を読み取るのでchild_addイベントで実装します。

まずはイベントが呼び出された時点でデータを取得します。

その後は指定したパスにデータが追加されるたびに呼び出され、追加された子のデータを返します。

 

チャットっぽくデータを表示させよう


それではここでチャットっぽくリアルタイムにデータを取得して画面上に表示させてみましょう。

前回のスクリプトに以下の処理を追加します。

これでリアルタイムにデータを取得して表示することができます。

 

動作を確認してみよう


実際に動かして確認してみましょう。

異なったブラウザを2つ開いてアクセスします。

開いたときはどちらのブラウザにも以下のように2つのメッセージが表示されています。

どちらか一方のブラウザでメッセージを送ってみてください。

もう一方のブラウザに新しいメッセージが表示されているかと思います。

リアルタイムに変更が反映されました!すごい!

 

まとめ


ここまでfirebaseのRealtime Databaseを使用して簡単なチャットを作成しました。

このサービスを使用すれば簡単にリアルタイムな変更を取得することができます。

いろんなアプリケーションに応用できそうですね。

firebaseにはRealtime Database以外にも様々なサービスがあるのでもっと勉強していきたいです。

 


Previous: Git LFS にちょっと触れてみた Next: Chrome拡張機能でルーチンワークを自動化しよう  -実装編-

© 2017 ALL CONNECT Inc. All Rights Reserved.