vue.jsでFirebase Realtime Databaseを使ったシンプルなログ通知機能

最近、少しずつvue.jsを扱うようになってきたのですが、Firebase Realtime Databaseでデータベースの内容をストリーミングして、リアルタイムで通知機能みたいなのを作れないかなとやってみたことの備忘録です。

vuexを使って状態管理しています。なのでしれっと、説明なしでstore使ってますがそこはそれぞれ補完してください。$store.logの中身は、Booleanで未読既読の状態を保管てします。

FirebaseConfigをコンソールから取得

ここはお決まりですね。

firebase-config.js

export const firebaseConfig = {
  apiKey: 'your_apiKey',
  authDomain: 'your_authDomain',
  databaseURL: 'your_databaseURL',
  projectId: 'your_projectId',
  storageBucket: 'your_storageBucket',
  messagingSenderId: 'your_messagingSenderId',
}

FirebaseをInitialize

config.jsはmain.jsと同じところにおきました。（それがいいかはさておき）

main.js

import {firebaseConfig} from './firebase-config'
var fb = firebase.initializeApp(firebaseConfig)
export var firebaseDatabase = fb .database()

mountされたら、Firebaseに接続

これでストリーミングしてくれます。簡単
import {firebaseDatabase} from '../../main'
という感じでscriptの中でimportします

Log.vue

export default {
    name: 'log',
    mounted() {
      firebaseDatabase.ref('logs/').on('value', (snapshot) => {
        this.$store.state.logUnRead = snapshot.val()
      })
    }
}

storeの中はこんな感じです

store/log.js

export default {
  state: {
    logUnRead: false,
  },
}

表示

通知そのものは簡単な赤ポチです。未読ログがある場合は出る、それ以外は表示しないというシンプルな感じです

Log.vue

<span v-show="$store.state.log.logUnRead" class="unread-badge"></span>

Log.vue

.unread-badge {
    background-color: red;
    border-radius: 50%;
    width: 10px;
    height: 10px;
    position: relative;
    top: 0px;
    left: 10px;
  }

Firebaseの更新

読んだよ！というのはここではわかりやすくボタンを設置しました

Log.vue

<template>
 <a href="" @click.prevent="readLogs">読んだよ</a>
</template>

・・・（略）
<script>
  export default{
    name: 'log',
    methods: {
      readLogs() {
        let updates = {}
        updates['/logs/'] = true
        firebaseDatabase.ref().update(updates)
      },
    }
  }
</script>