Firestoreのリアルタイムリスナーの書き方

FirestoreにはWebSocketを利用して、データの更新を各端末に送信するリアルタイムリスナーという仕組みがあります。
更新を確認するのにポーリングする必要がなく非常に強力な仕組みです。

CRUDの書き方は以下を参照してください。
FirestoreのCRUD操作の書き方まとめ

単一ドキュメントのリッスン

リアルタイムリスナーを使用たい場合は、ドキュメントのリファレンスでonSnapshotメソッドを使用します。

 db.doc('items/[documentId]')
   .onSnapshot(function(doc) {
      
       // ドキュメントが作成、変更、削除されるたびに出力される
       console.log(doc.data());
       
       // リスナーの停止
       unsubscribe();
   });

リスナーを停止する場合は、unsubscribeメソッドです。

複数ドキュメントのリッスン

複数ドキュメントの変更を検知したい場合も同様です。

 db.collection('items')
   .where('price', '>', 100)
   .onSnapshot(function(snapshot) {
       let items = [];
       snapshot.forEach(function(doc) {
           items.push(doc.data());
       });
       console.log(items[0].price);
   });

変更内容によって処理を分岐する

ドキュメントの更新内容によって処理を分岐したい場合は、スナップショットからdocChangesメソッドを呼び出します。

db.collection('items')
  .where('price', '>', 100)
  .onSnapshot(function(snapshot) {
    snapshot.docChanges().forEach(function(change) {
        // 追加時
        if (change.type === 'added') {
            console.log(change.doc.data().name);
        }
        // 更新時
        if (change.type === 'modified') {
            console.log(change.doc.data().name);
        }
        // 削除時
        if (change.type === 'removed') {
            console.log(change.doc.data().name);
        }
    });
});