はじめに
はい、他アカウントとのチャットを実装します。
その前にアカウントリスト的なものを実装したいと思いますが、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ですが、予定通りに個人間チャットまで積みましょう。