nuxt+firestoreでチャットを作る際にメッセージにアイコンを表示させる

やりたいこと

nuxt+firestoreでチャットを作り、メッセージしたユーザー情報とメッセージを紐付けてアイコン表示する。ユーザーはfirebase authでtwitter認証した。

仕様

• userをfirestoreに保存
• uidでuserとmessageをヒモづけ
• iconをtwitterauthのPhtoUrlから表示

userをfirestoreに保存

最初firebaseauthの情報をとってこれないかなと思ったけどログイン中ユーザー以外の情報は難しそうだったのでlogin時にユーザー情報をauthからfirestoreに持ってくることに。ユーザー情報を別の場所に持ってくるの怖いので最小限に抑えて渡す。

こんなかんじでonAuthStateChangedでloginをキャッチしてlogin時にfirestoreに保存。最初signInWithRedirect時に保存しようと思っていたけどredirectされてしまうのでstateの変更をキャッチする方向にした。

mounted: function () {
    firebase.auth().onAuthStateChanged(user => {
      var user = firebase.auth().currentUser
      var name, photoUrl, uid
      if (user != null) {
          uid = user.uid
          photoUrl = user.photoURL
          var db = firebase.firestore()
          db.collection('user').doc(uid).set({
            name: name,
            photoUrl: photoUrl,
            uid: uid,
            created: firebase.firestore.FieldValue.serverTimestamp()
          })
      }
  }

ちなみにmoutedなのでaddとかだと毎回追加されてしまう。setでuidを指定して上書きする形にする。

uidでuserとmessageをヒモづけ

下記みたいな設計で紐付け

iconをtwitterauthのPhtoUrlから表示

    const db = firebase.firestore()
 db.collection('room').doc(this.room_id).collection('message').onSnapshot(querySnapshot => {
      querySnapshot.docChanges().forEach(doc => {
        var thatmessages = this.messages
        var user_icon_ref = db.collection("user").doc("user_id")
        user_icon_ref.get().then(function (userdoc) {
          var user_icon_url = userdoc.data()
          thatmessages.push({
            ...doc.doc.data(),
            id: doc.doc.id,
            user_icon: user_icon_url.photoUrl
          })
        })
      })
    })

messagesがforEach内にそのままだと渡せなかったのでthatmessagesに代入して経由している。