Firestoreのリアルタイムアップデートを使ってみた

Webとの共有画面の対応にリアルタイムアップデートを追加してみた

内容

アプリからWebページ共有の有無をリアルタイムで切り替えるように修正してみた

ドキュメント

firebase.google.com

ここにやり方が書いてあるので、そのまま実装

実装

動きはこんな感じになりました。

コード

https://github.com/wheatandcat/Peperomia/blob/master/shareWeb/src/lib/firebase.ts#L31-L42

export const onSnapshot = async (
  doc: string,
  callback: (data: Plan) => void
) => {
  db.collection("plans")
    .doc(doc)
    .onSnapshot(function(doc) {
      const data: any = doc.data();

      callback(data);
    });
};

onSnapshot

上記で対象のドキュメントの更新を監視ができるので、更新にcallbackをつける

https://github.com/wheatandcat/Peperomia/blob/master/shareWeb/src/components/pages/Schedule/Connected.tsx

■components/pages/Schedule/Connected.tsx

  async componentDidMount() {
    await this.getData();
    onSnapshot(this.props.match.params.id, this.onSnapshot);
  }

  onSnapshot = async (data: Plan) => {
    if (this.state.createDate === data.createDate.seconds) {
      return;
    }

    this.setState({
      updating: true
    });

    //データを更新
    await this.getData();

    setTimeout(() => {
      this.setState({
        updating: false
      });
    }, 3000);
  };

あとは、componentDidMountで監視を実行してcallbackでデータを更新すればOK

おわり

手軽に実装できた。 APIをポーリングするより筋が良さげなので、他の機会でも使っていたいと思った