【Firebase】他アカウントのプロフィールが変更されたら即時反映する

投稿者:

はじめに

mBaaSの醍醐味に切り込みます。

こんな感じのプロフィール一覧に見えているアカウントがプロフィール変更を行ったら、即時反映してやります。

実装してみましょう

    var users_query = firebase.firestore()
    .collection('users')
    .orderBy('uid', 'asc');

    // Start listening to the query.
    users_query.onSnapshot(function(snapshot) {
      snapshot.docChanges().forEach(function(change) {
        var message = change.doc.data();
        // 略
        if(change.type == 'added'){
          // change.type

上記のようにfirestoreのスナップショットを取得していると思いますが、
change.type でデータに最初にアクセスしてからの変更種別を取得できます。

         if(change.type == 'added'){
            //画面を開いて最初に追加された
           var line = users_parts; // 枠線込みのテンプレート
            line = line.replace('replace_to_div_id', 'user_'+message.uid);
            line = line.replace('replace_to_introduce', message.introduce);
            line = line.replace('replace_to_gender', message.gender);
            line = line.replace('replace_to_name', message.name);
            line = line.replace('/assets/img/unnamed.png', message.picture);
            getElemID('users_window').innerHTML += line;
          } else if(change.type == 'modified'){
            // 画面を開いてから変更された
            var parent = getElemID('user_'+message.uid);
            var line = users_replace_parts; // 枠線の中のテンプレート
            line = line.replace('replace_to_introduce', message.introduce);
            line = line.replace('replace_to_gender', message.gender);
            line = line.replace('replace_to_name', message.name);
            line = line.replace('/assets/img/unnamed.png', message.picture);

            parent.innerHTML = line;

          } else {
            // 画面を開いてのち削除された
            getElemID('user_'+message.uid).remove;
          }

なおmodifiedの際の書き換えについて最初以下のように試行したのですが、うまいこといきませんでした。

          } else if(change.type == 'modified'){
            // 画面を開いてから変更された
            var parent = getElemID('user_'+message.uid);
            parent.getElementsByClassName('user_list_name').innerHTML = message.name;
            parent.getElementsByClassName('user_list_gender').innerHTML = message.gender;
            parent.getElementsByClassName('user_list_introduce').innerHTML = message.introduce;
          } else {

innerHTMLに格納してもinnerTextに格納しても反映されず。
dom要素は見えるんですが、addedの際にそもそもStringで扱ったからなんでしょう。
addedの場合と同様に対応しました。

あとチャットウィンドウの中のプロフィール画像を変更するギミックを入れてやります。

コメントを残す