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>

最初に読み込んでいる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)

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

// データベースの参照を準備
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.`);
        }
    });
});

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

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

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

$ docker-compose up

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

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

The following two tabs change content below.

髙妻智一

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






よく読まれている関連記事はこちら



コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です