Go to Qiita Advent Calendar 2024 Top
LoginSignup
48
43

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@Satachito(Satoru Ogura)

Firebase / Firestore を使って簡単な Chat を作ってみる。(JS, Vue)

Last updated at Posted at 2018-02-25

最近話題の FireStore の使い方を Chat を作りながら説明してみます。
以下の順番でやってみます。

  • HTML / JavaScript で素朴に
  • Vue でモダンに
  • Quasar でアプリに

Quasar でやった最終の形を
https://firestore-p.firebaseapp.com
でホストしてあります。
適当にサインアップして使ってみてもらって構いません。

SS5.png

準備

Firebase / Firestore をセッティング

公式ドキュメントにのっとればプロジェクトのセットアップまでは簡単です。

Authentication のログイン方法で、メール／パスワードを有効にします。

SS1.png

データベースのルールをとりあえずテストモードにしておきます。

SS2.png

Firebase / Firestore の準備はこれだけで OK です。

チャットのデータの形

以下の4つのプロバティからなるドキュメントで、1つの投稿を表すものとします。

  • body メッセージの本文
  • date 投稿日
  • name ハンドル（ニックネーム）
  • user 投稿者の ユーザー UID

キーは自動生成にします。

コレクションの名前は接頭詞 room- に部屋を表すキーワードをつけたものとします。

これらは決めておくだけです。SQL 型のデータベースのようにテーブル定義とかフィールド定義とかする必要はありません。

SS3.png

HTML / JavaScript でやってみる

以下のファイルをローカルに作ってブラウザにくわせてみてください。
firebase.initializeApp のパラメータは、firebase プロジェクトの設定からもってきてください。

index.html
<!DOCTYPE html>
<html>

  <div id="auth" style="display: none">
    <input  id="email"    placeholder="email"    type="email">
    <input  id="password" placeholder="password" type="password">
    <button id="login">Login</button>
    <input  id="nickname" placeholder="nickname">
    <button id="signup">Signup</button>
  </div>

  <div id="main" style="display: none">
    <div>
      You're <span id="user"></span>
      <button id="logout">Logout</button>
    </div>
    <div id='messages'></div>
    <textarea id="body" rows="7" cols="60" placeholder="Your message"></textarea>
    <button id="submit">Submit</button>
  </div>

  <script src="https://www.gstatic.com/firebasejs/4.10.1/firebase.js"></script>
  <script src="https://www.gstatic.com/firebasejs/4.10.1/firebase-firestore.js"></script>
  <script>
    firebase.initializeApp(
      { apiKey            : "ここには"
      , authDomain        : "自分の"
      , databaseURL       : "やつを"
      , projectId         : "はりつけて"
      , storageBucket     : "ください"
      , messagingSenderId : "ね！"
      }
    )

    document.addEventListener(
      'DOMContentLoaded'
    , function() {

        const wCR = firebase.firestore().collection( 'room-japanese' )
        const wAuth = firebase.auth()

        let wUnsubscriber
        wAuth.onAuthStateChanged(
          user => {
            document.querySelector( '#auth' ).style.display = user ? 'none' : 'block'
            document.querySelector( '#main' ).style.display = user ? 'block' : 'none'
            document.querySelector( '#user' ).textContent = user ? user.displayName : ''
            if ( wUnsubscriber ) {
              wUnsubscriber()
              wUnsubscriber = null
            }
            if ( user ) {
              wUnsubscriber = wCR.orderBy( 'date' ).onSnapshot(
                ss => {
                  let w = '<table>'
                  ss.forEach(
                    doc => {
                      const wData = doc.data()
                      w += '<tr>'
                      w += '<td>' + wData.name + '</td>'
                      w += '<td>' + new Date( wData.date ) + '</td>'
                      w += '<td>' + wData.body + '</td>'
                      w += '</tr>'
                    }
                  )
                  w += '</table>'
                  document.querySelector( '#messages' ).innerHTML = w
                }
              )
            }
          }
        )

        document.querySelector( '#login' ).addEventListener(
          'click'
        , event => wAuth.signInWithEmailAndPassword(
            document.querySelector( '#email' ).value
          , document.querySelector( '#password' ).value
          ).catch( e => alert( e ) )
        )

        document.querySelector( '#signup' ).addEventListener(
          'click'
        , event => {
            let wNickname = document.querySelector( '#nickname' ).value
            if ( !wNickname ) alert( 'Input your nickname' )
            else {
              wAuth.createUserWithEmailAndPassword(
                document.querySelector( '#email' ).value
              , document.querySelector( '#password' ).value
              ).then(
                user => user.updateProfile( { displayName: wNickname } )
              ).then(
                () => document.querySelector( '#user' ).textContent = wNickname
              ).catch( e => alert( e ) )
            }
          }
        )

        document.querySelector( '#logout' ).addEventListener(
          'click'
        , event => wAuth.signOut()
        )

        document.querySelector( '#submit' ).addEventListener(
          'click'
        , event => {
            let wBody = document.querySelector( '#body' )
            if ( !wBody.value ) alert( 'Input your message' )
            else {
              const wUser = wAuth.currentUser
              wCR.add(
                { body: wBody.value
                , date: Date.now()
                , name: wUser.displayName
                , user: wUser.uid
                } 
              ).then(
                () => wBody.value = ''
              ).catch( e => alert( e ) )
            }
          }
        )
      }
    )

  </script>
</html>

Vue でやってみる

vue init webpack ＜プロジェクトを格納するフォルダの名前＞

上のコマンドで下のようにオプションを選択したものとします。（ESLint をオンにするとエラーが出まくりになります。）

? Project name 適当な名前
? Project description A Vue.js project
? Author Satoru Ogura <satoru.ogura@me.com>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm

firebase をインストールします。

cd ＜プロジェクトを格納するフォルダの名前＞
npm i firebase --save

説明の都合上、全部 main.js にまとめてあります。

main.js
import firebase from 'firebase'

firebase.initializeApp(
  { apiKey            : "ここには"
  , authDomain        : "自分の"
  , databaseURL       : "やつを"
  , projectId         : "はりつけて"
  , storageBucket     : "ください"
  , messagingSenderId : "ね！"
  }
)

import Vue from 'vue'
Vue.config.productionTip = false

import  Vuex from 'vuex'
Vue.use( Vuex )

import VueRouter from 'vue-router'
Vue.use( VueRouter )

const
Login = {
  template: `
    <div>
      <input  v-model="email"     placeholder="email"     type='email'>
      <input  v-model="password"  placeholder="password"  type='password'>
      <button @click="login">Login</button>
      <input  v-model="nickname"  placeholder='nickname'>
      <button @click="signup">Signup</button>
    </div>
  `
, data() {
    return {
      email : ''
    , password: ''
    , nickname: ''
    }
  }
, methods: {
    login() {
      firebase.auth().signInWithEmailAndPassword( this.email, this.password ).then(
        user => this.$router.push( this.$route.query.redirect ? this.$route.query.redirect : '/' )
      ).catch( e => alert( e ) )
    }
  , signup() {
      if ( this.nickname ) {
        firebase.auth().createUserWithEmailAndPassword( this.email, this.password ).then(
          user => user.updateProfile( { displayName: this.nickname } )
        ).then(
          () => {
            this.$store.commit( 'user', firebase.auth().currentUser )
            this.$router.push( this.$route.query.redirect ? this.$route.query.redirect : '/' )
          }
        ).catch( e => alert( e ) )
      }
    }
  }
}

import 'firebase/firestore'

const
Chat = {
  template: `
    <div>
      <span v-if="$store.state.user">You're {{ $store.state.user.displayName }}</span>
      <button @click="$router.push( '/login' )">Logout</button>
      <table>
        <tr v-for="( post, index ) in posts" :key='index'>
          <td>{{ post.name }}</td>
          <td>{{ ( new Date( post.date ) ).toString() }}</td>
          <td>{{ post.body }}</td>
        </tr>
      </table>
      <textarea v-model="body" rows="7" cols="60" placeholder="Your message"></textarea>
      <button @click="submit">Submit</button>
    </div>
  `
, data() {
    return {
      body        : ''
    , posts       : []
    , unsubscribe : null
    }
  }
, methods: {
    submit() {
      if ( !this.body ) return
      firebase.firestore().collection( "room-japanese" ).add( 
        { body: this.body
        , date: Date.now()
        , name: this.$store.state.user.displayName
        , user: this.$store.state.user.uid
        }
      ).then(
        () => this.body = ''
      ).catch( e => alert( e ) )
    }
  }
, created() {
    this.unsubscribe = firebase.firestore().collection( "room-japanese" ).orderBy( 'date' ).onSnapshot(
      ss => {
        let w = []
        ss.forEach( doc => w.push( doc.data() ) )
        this.posts = w
      }
    )
  }
, beforeDestroy() {
    this.unsubscribe()
  }
}

let app
firebase.auth().onAuthStateChanged(
  p => {
    if ( app ) {
      app.$store.commit( 'user', p )
    } else {
      let router = new VueRouter(
        { routes: [
            { path: '/login', component: Login }
          , { path: '/'     , component: Chat }
          ]
        }
      )
      router.beforeEach(
        async ( to, from, next ) => {
          if ( firebase.auth().currentUser ) {
            if ( to.path == '/login' ) await firebase.auth().signOut()
            next()
          } else {
            if ( to.path == '/' ) {
              next( { path: '/login', query: { redirect: to.path } } )
            } else {
              next()
            }
          }
        }
      )
      app = new Vue(
        { el    : '#app'
        , store : new Vuex.Store(
            { state     : { user: p }
            , mutations : { user: ( state, payload ) => state.user = payload }
            }
          )
        , router
        , template: '<router-view id="app" />'
        }
      )
    }
  }
)

firebase の Auth は初期状態みたいなモードがあって、その時は使えまないというちょっと悩ましい仕様があります。
なので、
firebase.auth().onAuthStateChanged
を最初に発行して、初期状態が終わってからアプリを始めるようにしてあります。

#Quasar でやってみる

上の２つの例にはチャット部屋が一つしかありませんでしたが、ここからは複数のチャット部屋があるような場合をやってみます。
この場合、部屋を選択するための UI を用意する必要が出てきます。
そういう場合素の Vue でガリガリ書いてもいいんですが、コンポーネントライブラリを使用すると楽です。
ここでは最近お気に入りの Quasar を使ってみます。

quasar init プロジェクトを格納するフォルダの名前

説明の都合上、Error404.vue 以外は全部 main.js にまとめてあります。
まとめる都合上、config/index.js の alias に以下の行を追加してあります。

vue: 'vue/dist/vue.js'

また ESLint を止めるために
build/webpack.base.conf.js
を編集して、module - rules の // eslint のところをまるまるコメントアウトしてください。

 38 //      { // eslint
 39 //        enforce: 'pre',
 40 //        test: /\.(vue|js)$/,
 41 //        loader: 'eslint-loader',
 42 //        include: projectRoot,
 43 //        exclude: /node_modules/,
 44 //        options: {
 45 //          formatter: require('eslint-friendly-formatter')
 46 //        }
 47 //      },
main.js
import firebase from 'firebase'

firebase.initializeApp(
  { apiKey            : "ここには"
  , authDomain        : "自分の"
  , databaseURL       : "やつを"
  , projectId         : "はりつけて"
  , storageBucket     : "ください"
  , messagingSenderId : "ね！"
  }
)

import Vue from 'vue'
Vue.config.productionTip = false

import  Vuex from 'vuex'
Vue.use( Vuex )

import Router from 'vue-router'
Vue.use( Router )

import Quasar from 'quasar'
Vue.use( Quasar )

require(`quasar/dist/quasar.${__THEME}.css`)

if (__THEME === 'mat') {
  require('quasar-extras/roboto-font')
}
import 'quasar-extras/material-icons'

import {
  QLayout
, QToolbar
, QToolbarTitle
, QBtn
, QIcon
, QInput
, QList
, QSideLink
, QItemMain
, QListHeader
, QTabs
, QScrollArea
, QCard
, QCardTitle
} from 'quasar'

function
load ( component ) {
  // '@' is aliased to src/components
  return () => import( `@/${component}.vue` )
}

const
App = {
  template:`
    <q-layout ref="layout">

      <q-toolbar slot="header">
        <q-btn flat @click="$refs.layout.toggleLeft()">
          <q-icon name="menu" />
        </q-btn>
        <q-toolbar-title>
          Talk Circle
          <span slot="subtitle">Running on Quasar v{{$q.version}}</span>
        </q-toolbar-title>
        <template v-if='$store.state.user'>
          <q-toolbar-title>{{ $store.state.user.displayName }} ({{ $store.state.user.email }})</q-toolbar-title>
          <q-btn flat @click="logout()">LOGOUT</q-btn>
        </template>
      </q-toolbar>

      <q-scroll-area slot="left" style="width: 100%; height: 100%;">
        <q-side-link item to='/chat/javascript'>
          <q-item-main label='JavaScript' />
        </q-side-link>
        <q-side-link item to='/chat/vue'>
          <q-item-main label='Vue' />
        </q-side-link>
        <q-side-link item to='/chat/quasar'>
          <q-item-main label='Quasar' />
        </q-side-link>
        <q-side-link item to='/chat/firebase'>
          <q-item-main label='Firebase' />
        </q-side-link>
      </q-scroll-area>

      <router-view :key="$route.path" />

    </q-layout>
  `
, components: {
    QLayout
  , QToolbar
  , QToolbarTitle
  , QBtn
  , QIcon
  , QList
  , QSideLink
  , QItemMain
  , QListHeader
  , QTabs
  , QScrollArea
  }
, methods: {
    async logout() {
      await firebase.auth().signOut()
      this.$router.push( "/" )
    }
  }
}

const
Login = {
  template: `
    <div>
      <q-input v-model="email"    float-label="email"     type="email" />
      <q-input v-model="password" float-label="password"  type="password" />
      <q-btn @click="login">Login</q-btn>
      <q-input v-model="nickname" float-label="nickname" />
      <q-btn @click="signup">Signup</q-btn>
    </div>
  `
, components  : {
    QBtn
  , QInput
  }
, data() {
    return {
      email   : ''
    , password: ''
    , nickname: ''
    }
  }
, methods: {
    login() {
      firebase.auth().signInWithEmailAndPassword( this.email, this.password ).then(
        p => this.$router.push( this.$route.query.redirect ? this.$route.query.redirect : '/' )
      ).catch( e => alert( e ) )
    }
  , signup() {
      if ( this.nickname ) {
        firebase.auth().createUserWithEmailAndPassword( this.email, this.password ).then(
          user => user.updateProfile( { displayName: this.nickname } )
        ).then(
          () => {
            this.$store.commit( 'user', firebase.auth().currentUser )
            this.$router.push( this.$route.query.redirect ? this.$route.query.redirect : '/' )
          }
        ).catch( e => alert( e ) )
      }
    }
  }
}

const
Main = {
  template: '<div>Select talk room from left menu. If you do not see the left menu, press humberger button sitting on the left side of the menu bar.</div>'
}


import 'firebase/firestore'

const
Chat = {
  template: `
    <div>
      <q-card flat v-for="( post, index ) in posts" :key='index'>
        <q-card-title>
          {{ post.body }}
          <span slot='subtitle'>{{ post.name }}</span>
          <span slot='right'>{{ ( new Date( post.date ) ).toString() }}</span>
        </q-card-title>
      </q-card>
      <q-input type="textarea" :min-rows="7" v-model="body" float-label="message" />
      <q-btn @click="submit">送信</q-btn>
    </div>
  `
, components: {
    QBtn
  , QInput
  , QCard
  , QCardTitle
  }
, data() {
    return {
      body        : ''
    , posts       : []
    , unsubscribe : null
    }
  }
, methods: {
    submit() {
      if ( !this.body ) return
      firebase.firestore().collection( "room-" + this.$route.params.id ).add(
        {   body: this.body
        ,   date: Date.now()
        ,   name: this.$store.state.user.displayName
        ,   user: this.$store.state.user.uid
        }
      ).then(
        () => this.body = ''
      ).catch( e => alert( e ) )
    }
  }
, created() {
    this.unsubscribe = firebase.firestore().collection( "room-" + this.$route.params.id ).orderBy( 'date' ).onSnapshot(
      ss => {
        let w = []
        ss.forEach( doc => w.push( doc.data() ) )
        this.posts = w
      }
    )
  }
, beforeDestroy() {
    this.unsubscribe()
  }
}

let app
firebase.auth().onAuthStateChanged(
  p => {
    if ( app ) {
      app.$store.commit( 'user', p )
    } else {
      Quasar.start(
        () => {
          app = new Vue(
            { el    : '#q-app'
            , store : new Vuex.Store(
                { state   : { user: p }
                , mutations : { user: ( state, payload ) => state.user = payload }
                }
              )
            , router  : new Router(
                { mode: 'history'
                , scrollBehavior: () => ( { y: 0 } )
                , routes: [
                  , { path: '/'         , component: Main }
                  , { path: '/chat/:id' , component: Chat }
                  , { path: '/login'    , component: Login }
                  , { path: '*'         , component: load( 'Error404' ) }
                  ]
                }
              )
            , render  : h => h( App )
            }
          )
          app.$router.beforeEach(
            async ( to, from, next ) => {
              if ( firebase.auth().currentUser ) {
                if ( to.path == '/login' ) await firebase.auth().signOut()
                next()
              } else {
                if ( to.path.startsWith( '/chat/' ) ) {
                  next( { path: '/login', query: { redirect: to.path } } )
                } else {
                  next()
                }
              }
            }
          )
        }
      )
    }
  }
)

Firestore のルールの実例

Firestore のルールをテストモード（全ての読み書きを無条件で許可）にしままなのもなんなので、実際は以下のようにしてあります。

service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow create: if request.auth != null && request.resource.data.user == request.auth.uid;
      allow update: if false;
      allow delete: if false;
      allow list: if request.auth != null;
      allow get: if request.auth != null;
    }
  }
}
48
43
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
48
43

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?