Cloud Firestoreでリアルタイムチャットを開発する

Cloud Firestoreとは

Cloud FirestoreはGoogle の柔軟でスケーラブルな NoSQL クラウドデータベースを使用して、クライアント側開発とサーバー側開発のデータを保存、同期します。Firebase Realtime Database と同様に、リアルタイムリスナーを介してクライアントアプリ間でデータを同期し、モバイルとウェブのオフラインサポートを提供します。

ざっくり色々読んだ感じだとFirebase Realtime Databaseにある機能は持っていて、コレクションが使えたり、レイテンシが改善されたりと上位互換としてリリースされたのかなと思いましたね。

主な機能

Realtime Databaseとはデータモデルが大きく違いますね！コレクションが使えるようになり柔軟なデータ構造に対応できるみたいですね。

チャット開発

それではCloud Firestoreを使ってチャットを開発していきます。まずはGCPのコンソール上でプロジェクトを作成します。

Cloud Firestoreの作成

Firebaseのコンソールにアクセスしてプロジェクトを作成します。

https://console.firebase.google.com/

サイドメニューからDatabaseを選択し、Cloud Firestore Betaのデータベースを作成します。2018年5月時点ではまだBeta版となっています。

モードは簡単に読み書きできるようにテストモードで実行します。

クライアントの実装

WEBブラウザからアクセスするためのプログラムを書きます。メッセージの読み込みと書き込みだけなので下記のようになります。

<html>
    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
        <script src="https://www.gstatic.com/firebasejs/4.11.0/firebase.js"></script>
        <script src="https://www.gstatic.com/firebasejs/4.11.0/firebase-firestore.js"></script>
    </head>
    <body>
        <div>
            <input id="name" placeholder="名前">
            <input id="message" placeholder="メッセージ">
            <button id="send">投稿</button>
        </div>
        <ul id="messages"></ul>
        <script>
            // Initialize Firebase
            var config = {
                apiKey: "AIzaSyDPBkhALgxHOA45ubgK1AU8ox_b-fFn8iM",
                authDomain: "test-8665a.firebaseapp.com",
                projectId: "test-8665a"
            };
            firebase.initializeApp(config)
            
            // データベースの参照を準備
            var messagesRef = firebase.firestore().collection('messages')
        
            // メッセージを表示
            messagesRef.onSnapshot(function(snapshot) {
                snapshot.docChanges.forEach(function(change) {
                    if (change.type === 'added') {
                        $('<li>').text(change.doc.data().name + ': ' + change.doc.data().body).prependTo('#messages');
                    }
                    if (change.type === 'removed') {
                        console.log(`User ${change.doc.id} has gone offline.`);
                    }
                });
            });
        
            $('#send').click(function() {
                // 新規メッセージを投稿
                messagesRef.add({
                    name: $('#name').val(),
                    body: $('#message').val()
                });
            });
        </script>
    </body>
</html>

<html>

<head>

</head>

<body>

<div>

</div>

// Initialize Firebase

var config = {

apiKey: "AIzaSyDPBkhALgxHOA45ubgK1AU8ox_b-fFn8iM",

authDomain: "test-8665a.firebaseapp.com",

projectId: "test-8665a"

};

firebase.initializeApp(config)

// データベースの参照を準備

var messagesRef = firebase.firestore().collection('messages')

// メッセージを表示

messagesRef.onSnapshot(function(snapshot) {

snapshot.docChanges.forEach(function(change) {

if (change.type === 'added') {

$('<li>').text(change.doc.data().name + ': ' + change.doc.data().body).prependTo('#messages');

}

if (change.type === 'removed') {

console.log(`User ${change.doc.id} has gone offline.`);

}

});

$('#send').click(function() {

// 新規メッセージを投稿

messagesRef.add({

name: $('#name').val(),

body: $('#message').val()

});

</script>

</body>

</html>

最初に読み込んでいるfirebase.jsは必須のスクリプトになります。次に読み込んでいるfirebase-firestore.jsがCloud Firestore用のスクリプトになります。initializeAppに設定する値はプロジェクトのトップから取得できます。

初期化部分はRealtime DatabaseでもFirestoreでも同じですね。

// Initialize Firebase
var config = {
    apiKey: "AIzaSyDPBkhALgxHOA45ubgK1AU8ox_b-fFn8iM",
    authDomain: "test-8665a.firebaseapp.com",
    projectId: "test-8665a"
};
firebase.initializeApp(config)

// Initialize Firebase

var config = {

apiKey: "AIzaSyDPBkhALgxHOA45ubgK1AU8ox_b-fFn8iM",

authDomain: "test-8665a.firebaseapp.com",

projectId: "test-8665a"

};

firebase.initializeApp(config)

コレクションへの参照を変数に保持します。

// データベースの参照を準備
var messagesRef = firebase.firestore().collection('messages')

1 2	// データベースの参照を準備 var messagesRef = firebase.firestore().collection('messages')

メッセージのリアルタイム取得は下記でできます。

// メッセージを表示
messagesRef.onSnapshot(function(snapshot) {
    snapshot.docChanges.forEach(function(change) {
        if (change.type === 'added') {
            $('<li>').text(change.doc.data().name + ': ' + change.doc.data().body).prependTo('#messages');
        }
        if (change.type === 'removed') {
            console.log(`User ${change.doc.id} has gone offline.`);
        }
    });
});

// メッセージを表示

messagesRef.onSnapshot(function(snapshot) {

snapshot.docChanges.forEach(function(change) {

if (change.type === 'added') {

$('<li>').text(change.doc.data().name + ': ' + change.doc.data().body).prependTo('#messages');

}

if (change.type === 'removed') {

console.log(`User ${change.doc.id} has gone offline.`);

}

});

データの登録はadd()関数を使うとFirestore保存できます。

messagesRef.add({
    name: $('#name').val(),
    body: $('#message').val()
});

messagesRef.add({

name: $('#name').val(),

body: $('#message').val()

});

dockerでnginxを起動

Firebaseはlocalhostか指定したドメインからしかアクセスできないのでnginxを使ってサーバを立てます。下記docker-compose.ymlを同じディレクトリに準備します。

version: '3'
services:
  web:
    image: nginx:alpine
    ports:
      - "8080:80"
    volumes:
      - ./:/usr/share/nginx/html

version: '3'

services:

web:

image: nginx:alpine

ports:

- "8080:80"

volumes:

- ./:/usr/share/nginx/html

下記コマンドでdockerを起動できたらhttp://localhost:8080にアクセスします。

$ docker-compose up

1	$ docker-compose up

複数タブを開いてリアルタイムにメッセージのやりとりが確認できたら完成です。

データはFirestoreのコンソールからも確認できます。

この記事を書いた人
最新の記事

髙妻智一

2013年CyberAgent新卒入社スマホゲームを作る子会社に所属し、サーバーサイドのエンジニアを担当。２年目の終わりから新規子会社の立ち上げに参加し、サーバーサイドのエンジニアリーダーとしてサービースのリリースから運用までを担当。 2018年仮想通貨のスマホウォレットを提供するGinco Incにブロックチェーンエンジニアとして入社。