【Nuxt.js】開発ブログ：firebaseでチャットアプリ①

前置き

RDBを活かしてチャットでも作ろう！
と思い立ってやった系の記事です🐣💭
Cloud Firestoreばかり
使っていたので…。

そしてWebSocket, Socket.IOを使用すると
サーバー側の実装が大変です💥笑
ということで
使用したことのある
Firebase Realtime Database
にしました🎈🧸

いつもの丁寧な解説ではなく、
こんなこと調べて
こういう手順で試してみた
という内容です💡

まだ完全完成ではないです！
呟いたらリアルタイムで表示できる
という最低限のレベル。

Vuex使って、とか
超スマートな書き方はしていません✍️
でも最初から使った方が楽ですね絶対←
その辺を後々…。

firebaseで使用したのはrealtime databaseとfirebase hostingです。
realtime databaseを使用することで、dbが更新されるとすべてのクライアントのローカル情報を更新してくれるので、
サーバー側の実装は一切していません。
firebase hostingは静的コンテンツのデプロイサービスです。
今回のチャットはhtml、css、jsだけなので、静的コンテンツを無料でデプロイしてくれる機能を使用しました。
ゴリラチャット作りました

➡️ゴリラチャット面白いので
　やってみてください🦍 {ｳﾎｯ
　クソアプリアドベントカレンダー
　面白いです🤣

⬇️プロジェクトの作成方法や
　基本的なデータの追加、取得は
　こちらをご覧ください👀
【Nuxt.js】firebase導入編(RDB版)：データの追加取得をしよう

参考:
Firebaseでリアルタイムチャットを構築する
 FirebaseとFRP Reactでチャット
 【続】javascriptとhtmlだけ5分で作れるチャット！+ Firebaseを使ってWeb上に公開しちゃおう！
FirebaseのRealtime Databaseをざっくり使ってみる ~導入から取得編(保存に関しては編集中)~

そういえばLICEcapが
アプデの関係？で使えなくなりました、、、
PC画面を簡単に
gifにできるソフトほしいですね🤔

firebaseの使い方を確認

どうやらRDBにデータの追加をする
firebase.database().ref().child('message').push
内でon()メソッドを使うことにより
データ追加などの監視ができるらしいです👀ｼﾞｰｯ

公式ガイド: value イベントのリッスン

とりあえずやってみる

firebaseにpush、pushしたものを表示

ひとまずpushだけして、
たった今pushした物をcheck✅
画像は上から
firebaseRDB
console
ローカル表示です。

.on('value')の問題

とりあえずはできましたが、
ref().child("message")の中にある
自動生成されるランダムなid(?)を
どう指定するかの問題が出てきました。

まぁ、チャットするなら
メッセージを追加した後に
また全体のデータを
再取得すれば良いので
この部分は使わなくて良いし
豆知識くらいに思ってください…🤭笑

onの引数がvalueだと
データ全体を返してしまうようです。
ちなみにsnapshotのデータは
val()で取得しています。

コード

bodyというkeyは
ちょっと違うなと思ったので変えます🤔💦

<template>
  <div class="page">
    <p>{{ result.message }}</p>
    <form @submit.prevent="submit">
      <label>
        <span>
          名前:
        </span>
        <input
          type="text"
          v-model="user.name"
         />
      </label>
      <label>
        <span>
          message:
        </span>
        <input
          type="text"
          v-model="user.message"
         />
      </label>
      <button
        type="submit"
       >
        Submit
      </button>
    </form>
  </div>
</template>

<script>
import firebase from '@/plugins/firebase'

export default {
  data() {
    return {
      user: {
        name: '',
        message: ''
      },
      result: {
        message: ''
      }
    }
  },
  methods: {
    submit() {
      let Ref = firebase.database().ref().child('message')
      Ref.push({ name: this.user.name, body: this.user.message }).then(
        (response) => {
          Ref.on('value', (snapshot) => {
            const data = snapshot.val()
            this.result.message = data
            console.log(data)
          })
        }
      )
    }
  }
}
</script>

<p>{{ result.message }}</p>

<label>

<span>

名前:

</span>

<input

type="text"

v-model="user.name"

</label>

<label>

<span>

message:

</span>

<input

type="text"

v-model="user.message"

</label>

<button

type="submit"

Submit

</button>

</form>

</div>

</template>

import firebase from '@/plugins/firebase'

export default {

data() {

return {

user: {

message: ''

result: {

message: ''

}

methods: {

submit() {

let Ref = firebase.database().ref().child('message')

Ref.push({ name: this.user.name, body: this.user.message }).then(

(response) => {

Ref.on('value', (snapshot) => {

const data = snapshot.val()

this.result.message = data

console.log(data)

})

}

)

}

</script>

.on('child_added')

value以外でchild_**が使えるようです。
データを追加した時に
そのデータを取得できれば良いので
child_addedにしてみました。
こうすることでmessageの表示が可能に！
message.messageって分かりにくいので
せめて複数にするとかにします…

FirebaseのRealtime Databaseをざっくり使ってみる ~導入から取得編(保存に関しては編集中)~

<template>
  <div class="page">
    <p>{{ result.message.message }}</p>
    <form @submit.prevent="submit">
      <label>
        <span>
          名前:
        </span>
        <input type="text" v-model="user.name" />
      </label>
      <label>
        <span>
          message:
        </span>
        <input type="text" v-model="user.message" />
      </label>
      <button type="submit">
        Submit
      </button>
    </form>
  </div>
</template>

<script>
import firebase from '@/plugins/firebase'

export default {
  data() {
    return {
      user: {
        name: '',
        message: ''
      },
      result: {
        message: ''
      }
    }
  },
  methods: {
    submit() {
      let Ref = firebase.database().ref().child('message')
      Ref.push({ name: this.user.name, message: this.user.message }).then(
        (response) => {
          console.log(response, this.user)
          Ref.on('child_added', (snapshot) => {
            const data = snapshot.val()
            this.result.message = data
            console.log(data)
          })
        }
      )
    }
  }
}
</script>

<p>{{ result.message.message }}</p>

<label>

<span>

名前:

</span>

</label>

<label>

<span>

message:

</span>

</label>

Submit

</button>

</form>

</div>

</template>

import firebase from '@/plugins/firebase'

export default {

data() {

return {

user: {

message: ''

result: {

message: ''

}

methods: {

submit() {

let Ref = firebase.database().ref().child('message')

Ref.push({ name: this.user.name, message: this.user.message }).then(

(response) => {

console.log(response, this.user)

Ref.on('child_added', (snapshot) => {

const data = snapshot.val()

this.result.message = data

console.log(data)

})

}

)

}

</script>

全てのmessageを取得

現状では
その場でつぶやいた
messageしか取得できません。
ということでRDB上にある
全てのmessageを取得していきます💫

APIはjson形式なので
取得はaxiosを使ってみます。

⬇️axiosの基礎はこちら
【Nuxt.js】axios導入編：かんたん・お手軽API通信

ちなみにjsonにすると
push()メソッドを使ってからの
child_addedが効かなくなるので
送信にはjsonが使えませんね。
でも追加したものだけを
取得することはしなくて良いので
豆知識な感じで…笑

ということで
on()メソッドを消え去り、
pushが成功したら
再取得するようにしました🌟
変数とかぐちゃぐちゃなので
整理しつつ、
Vuexに移行したり
自分が投稿者の時だけ
右に表示させるようにします♪

<template>
  <div class="page">
    <p>すでにRDBにあるもの: {{ messages }}</p>
    <form @submit.prevent="submit">
      <label>
        <span>
          名前:
        </span>
        <input
          type="text"
          v-model="user.name"
        >
      </label>
      <label>
        <span>
          message:
        </span>
        <input
          type="text"
          v-model="user.message"
        >
      </label>
      <button
        type="submit"
      >
        Submit
      </button>
    </form>
  </div>
</template>

<script>
import axios from 'axios'
import firebase from '@/plugins/firebase'

export default {
  created() {
    return axios
      .get('https://sample-6a560.firebaseio.com/message.json')
      .then((res) => {
        const postArray = []
        for (const key in res.data) {
          let allKey = res.data[key]
          postArray.push(allKey.message)
        }
        this.messages = postArray
      })
  },
  data () {
    return {
      user: {
        name: "",
        message: "",
      },
      messages: "",
    }
  },
  methods: {
    submit (postData) {
      let Ref = firebase.database().ref().child('message')
      Ref.push({ name: this.user.name, message: this.user.message })
      .then(response => {
        this.getData ()
      })
    },
    getData () {
      return axios
      .get('https://sample-6a560.firebaseio.com/message.json')
      .then((res) => {
        const postArray = []
        for (const key in res.data) {
          let allKey = res.data[key]
          postArray.push(allKey.message)
          console.log(allKey.message)
        }
        this.messages = postArray
      })
    },
  },
}
</script

<p>すでにRDBにあるもの: {{ messages }}</p>

<label>

<span>

名前:

</span>

<input

type="text"

v-model="user.name"

</label>

<label>

<span>

message:

</span>

<input

type="text"

v-model="user.message"

</label>

<button

type="submit"

Submit

</button>

</form>

</div>

</template>

import axios from 'axios'

import firebase from '@/plugins/firebase'

export default {

created() {

return axios

.get('https://sample-6a560.firebaseio.com/message.json')

.then((res) => {

const postArray = []

for (const key in res.data) {

let allKey = res.data[key]

postArray.push(allKey.message)

}

this.messages = postArray

})

data () {

return {

user: {

message: "",

messages: "",

}

methods: {

submit (postData) {

let Ref = firebase.database().ref().child('message')

Ref.push({ name: this.user.name, message: this.user.message })

.then(response => {

this.getData ()

})

getData () {

return axios

.get('https://sample-6a560.firebaseio.com/message.json')

.then((res) => {

const postArray = []

for (const key in res.data) {

let allKey = res.data[key]

postArray.push(allKey.message)

console.log(allKey.message)

}

this.messages = postArray

})

}

</script

まとめ

on()を使わなくても良い
と気付くのに
時間がかかってしまいました🤣笑
最初に全体のコードをイメージするのって
本当に大事ですよね…