PROGRAMMING

チャットルームの作成【Vue.js】

今日はチャットルームへ移動できるようにし、メッセージを保存できるようにします。

・チャットルームの移動
・メッセージの保存

slackの昨日の重要な部分ですので、きちんと理解しながら取り組んでいきたいと思います。

今日の内容

チャットルームの移動

まずはチャンネル名をクリックして、チャットルームに移動できるようにしていきます。

pages/channels/_id.vueというファイルを作成します。これはpages/channels/チャンネルIDというようにチャンネルごとにURLを変更させるためです。

_id.vueにはindex.vueの内容をコピーします。

<template>
 <div class="container">
   <div class="chats-layout">
     <messages />
   </div>
   <div class="input-layout">
     <chat-form />
   </div>
 </div>
</template>

<script>
import Messages from '~/components/Messages.vue'
import ChatForm from '~/components/ChatForm.vue'

export default {
 components: {
   Messages,
   ChatForm
 }
}
</script>

<style scoped>
.container {
 height: 100%;
}

.chats-layout {
 overflow: scroll;
 height: 90%;
}

.input-layout {
 height: 10%;
}
</style>

そしたら、index.vueのページを下記のように消しておきます。

<template>
  <div class="container">
  </div>
</template>

次に、チャンネルの部分をリンクにします。

link を生成するには nuxt-link というのを使います。

そして下記のように変更していきます。

<template>
  <div class="app-layout">
    <div class="sidebar">
      <p>チャンネル一覧</p>
      <p v-for="channel in channels" :key="channel.name">
        <nuxt-link :to="'/channels/${channles.id}'">
          {{ channel.name }}</nuxt-link >
      </p>
    </div>
    <div class="main-content">
      <Nuxt />
    </div>
  </div>
</template>

:toの部分は、v-bind:toの略です。その後にリンク先を指定しています。

現在のmountedだとチャンネルのidを取得できていないので、idを取得するようにします。

<script>
import { db } from '~/plugins/firebase'

export default {
  data() {
    return {
      channels: [],
    }
  },
  mounted() {
    db.collection('channels')
      .get()
      .then((querySnapshot) => {
        querySnapshot.forEach((doc) => {
          this.channels.push({ id: doc.id, ...doc.data() })
        })
      })
  },
}
</script>

this.channels.push(doc.data())これではドキュメントしか取得できていません。

しかし、ドキュメントのIDを取得しなければいけませんので、this.channels.push({id: doc.id, ...doc.data()})このようにIDを取得する必要があります。

... はスプレッド構文と言われるものです。

これにより、チャンネル名をクリックすると画面が移動できるようになります。

チャンネルの移動ができましたので、チャンネルに保存されているメッセージを表示できるようにしていきます。

メッセージの保存

まずはfirebaseでchannelsのドキュメントの下にmessagesというcollectionを設定して、下記のようにmessagesのドキュメントを追加します。

それでは_id.vuemountedを変更していきます。

<script>
import Messages from '~/components/Messages.vue'
import ChatForm from '~/components/ChatForm.vue'
import { db } from '~/plugins/firebase'

export default {
  components: {
    Messages,
    ChatForm,
  },
  mounted() {
    const channelID = this.$route.params.id
    db.collection('channels').doc(channelID).collection('messages').get()
  },
}
</script>

nuxt では、 this.$route によってパラメーターの channel id を取得することができます。

具体的にはパラメーターの情報は、this.$route.params に保持されています。そして、_id.vue と指定している場合は、this.$routes.params.id でパラメーターを取得できます。

そして、messagesコレクションのデータを取得したいので、コードは下記のようになります。db.collection('channels').doc(channelID).collection('messages').get()

それでは、チャンネル一覧の時のようにデータを取得していきます。

<script>
import Messages from '~/components/Messages.vue'
import ChatForm from '~/components/ChatForm.vue'
import { db } from '~/plugins/firebase'

export default {
  components: {
    Messages,
    ChatForm,
  },
  data () {
    return {
      messages: []
    }
  },
  mounted() {
    const channelID = this.$route.params.id
    db.collection('channels').doc(channelID).collection('messages').get()
    .then((querySnapshot) => {
      querySnapshot.forEach((doc) => {
        this.messages.push({id: doc.id, ...doc.data()})
      })
    })
  },
}
</script>

この部分はほとんど前回の部分でやったので、説明は省きます。

これでmessagesが保存ができました。

それでは、次回は表示ができるようにしていきます!

まとめ

今日はメッセージの保存までできました。

次回はメッセージを表示するところまでやっていきたいと思います!

最後まで読んでくださり、ありがとうございました!

-PROGRAMMING

Copyright © Iseblog ,@2020 All Rights Reserved.