Firebase+webpack+Vue.jsでチャットを作る方法

Ⅰ. はじめに

タイトルの通り「Firebase+webpack+Vue.jsでチャットを作る方法」です。

Ⅱ. やり方

1. 必要なCLIツールをインストールする

npm install -g vue-cli

2. Vueプロジェクトを作成する

vue init webpack FirebaseChat
cd FirebaseChat
npm run dev

3. firebaseをインストールする

npm install firebase

4. Firebase でプロジェクトを作成する

https://firebase.google.com/

5. Firebase の Realtime Database のルールを変更する

{
  "rules": {
    ".read": true,
    ".write": true
  }
}

6. プログラムを書く

src/main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import firebase from 'firebase/app'
import 'firebase/database'

Vue.config.productionTip = false

// Initialize Firebase
var config = {
  apiKey: 'your-app-key',
  authDomain: 'your-app-name.firebaseapp.com',
  databaseURL: 'https://your-app-name.firebaseio.com',
  projectId: 'your-app-name',
  storageBucket: 'your-app-name.appspot.com',
  messagingSenderId: '123456789'
}

firebase.initializeApp(config)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  firebase,
  components: { App },
  template: '<App/>'
})

src/App.vue

<template>
  <div id="app">
    <label for="name">名前</label>
    <input type="txt" id="name" v-model="name">

    <label for="message">メッセージ</label>
    <input type="txt" id="message" v-model="message">

    <button type="button" @click="sendMessage">送信</button>

    <div>
      <ul>
        <li v-for="item in list" :key="item.id">
          {{item.name}}: {{item.message}}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import firebase from 'firebase'

export default {
  name: 'app',
  data () {
    return {
      list: [],
      name: '',
      message: ''
    }
  },
  mounted () {
    this.listen()
  },
  methods: {
    listen () {
      firebase.database().ref('myBoard/').on('value', snapshot => {
        if (snapshot) {
          const items = snapshot.val()
          let list = []
          Object.keys(items).forEach((val, key) => {
            items[val].id = val
            list.push(items[val])
          })
          this.list = list
        }
      })
    },
    sendMessage () {
      firebase.database().ref('myBoard/').push({
        name: this.name,
        message: this.message
      })

      this.name = ''
      this.message = ''
    }
  }
}
</script>

<style>
</style>

7. 実行する

npm run dev

実行結果

参考

https://liginc.co.jp/378463
https://liginc.co.jp/382652