【Firebase】firebaseチャット試作でアカウント一覧を実装する

研究
Pixabay at Pexels
この記事は約5分で読めます。

この記事は1年前の記事です。当時の情報、理解に基づいておりますのでご留意ください

はじめに

はい、他アカウントとのチャットを実装します。
その前にアカウントリスト的なものを実装したいと思いますが、firebase authでは他のアカウントの一覧を参照できないんです。

そこでcloud firestoreにアカウント一覧のテーブルを作り参照させます。

実装を行います

まずプロフィール更新画面に項目を増やします。

次に、プロフィールの更新を行っているfunctionを以下のように修正します。

function updateProfile(photoURL){
  var user = firebase.auth().currentUser;
  var displayName = getElementValue('update_displayName');
  var gender = getElementValue('update_gender');
  var introduce = getElementValue('update_introduce');

  user.updateProfile({
    displayName : displayName,
    photoURL : photoURL
  }).then(function() {

    var db = firebase.firestore();

    db.collection("users").doc(user.uid).set({
      uid: user.uid,
      name: user.displayName,
      gender: gender,
      introduce: introduce,
      picture: photoURL,
    })
    .then(function() {
      console.log("Document successfully written!");
      document.getElementById('chat_message').value = '';

      alert('プロフィールを更新しました。');
      location.reload();

    })
    .catch(function(error) {
      console.error("Error writing document: ", error);
    });

  }).catch(function(error) {
    var errorCode = error.code;
    var errorMessage = error.message;
    alert(errorCode + ', ' + errorMessage);
  });

  document.querySelector('#update_form button').removeAttribute('disabled');
  document.querySelector('#update_form button').innerText = '反映';
}

firestoreには反映されました。
次にこの一覧を作ります。

UIをこのように作りました。

var users_parts = getElemID('users_parts_template').innerHTML;
// テンプレートをメモリに吸い出し、削除
getElemID('users_parts_template').remove();

// チャットデータを取ってくるのと同様にこちらも取得し、users_windowに納めます
    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();
        var line = users_parts;

        if(message.uid != user.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;
        }

      });
    }, function(error) {
      console.log(error.message );
      // location.reload();
    });

できた!本日はここまで。

さてLaravel+Vue.jsもそこそこに日曜大工的に掛かり始めたFirebaseですが、予定通りに個人間チャットまで積みましょう。

コメント

タイトルとURLをコピーしました