Realtime Database の作成、設定

左側のフレームから「Realtime Database」を選択して、画面から「データベースを作成」をクリックします。

「Realtime Databaseのセキュリティルール」ダイアログで、赤枠の「テストモードで開始」を選択して、「有効にする」をクリックします。

これでRealtime Databaseが作成されました。

チャットアプリの作成

ドキュメント

公式ドキュメント

Firebase Realtime Database
https://firebase.google.com/docs/database

JavaScript でのインストールと設定
https://firebase.google.com/docs/database/web/start
データベースの構造化
https://firebase.google.com/docs/database/web/structure-data
ウェブでのデータの読み取りと書き込み
https://firebase.google.com/docs/database/web/read-and-write
ウェブ上でデータリストを操作する
https://firebase.google.com/docs/database/web/lists-of-data

参考ブログ

Firebaseを使ってリアルタイムチャットを作成してみた

FirebaseのRealtime Databaseでチャットアプリを作成

サンプルプログラム

簡単なサンプルとして、「名前」と「メッセージ」の送信とリアルタイムの表示更新を行うWebページを作成してみましょう。

index.html

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />

   <script src="https://www.gstatic.com/firebasejs/7.24.0/firebase-app.js"></script>
   <script src="https://www.gstatic.com/firebasejs/7.24.0/firebase-auth.js"></script>
   <script src="https://www.gstatic.com/firebasejs/7.24.0/firebase-database.js"></script>

   <script src="main.js"></script>
</head>

<body>
<div>
    <div>
        <p>
        <input type="text" id="name">
        </p>
    </div>
    <div>
        <p>
         <textarea id="message" row="10"></textarea>
        </p>
        <p>
         <button id="send">send</button>
        </p>
    </div>
    <div id="output"></div>
</div>

</body>
</html>

main.js

window.onload = function() {

    // Your web app's Firebase configuration
    var firebaseConfig = {
        apiKey: "AIzaxxxxxxxxxxx-xxxxxxxx_xxxxxxxxxxxxxx",
        authDomain: "xxxx-xxxx.firebaseapp.com",
        databaseURL: "https://xxxx-xxxx.firebaseio.com",
        projectId: "xxxx-xxxx",
        storageBucket: "xxxx-xxxx.appspot.com",
        messagingSenderId: "xxxxxxxxxxx",
        appId: "x:xxxxxxxxxxx:web:xxxxxxxxxxxxxxxxxxxxxx"
    };
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);


    var database = firebase.database();

    let room = "chat_room";
    const send = document.getElementById("send");
    const name = document.getElementById("name");
    const message = document.getElementById("message");
    const output = document.getElementById("output");

    // write
    send.addEventListener('click', function() {
        database.ref(room).push({
            name:name.value,
            message:message.value
        });
        message.value = "";
        name.value = "";
    });

    // read
    database.ref(room).on("child_added", function(data) {
        const v = data.val();
        const k = data.key;
        let str = "";
        str += '<div class="name">名前：' + v.name + '</div>';
        str += '<div class="text">メッセージ：' + v.message + '</div>';
        output.innerHTML += str;
    });

};

冒頭の変数 firebaseConfig 内のパラメータの値は、あなたのアカウントで得られる値に置き換えてください。

firebase の database() と ref() から、書き込みには push() メソッド、読み取りには on() メソッドを使用します。
また、読み取りには"child_added"イベントを使用します。このイベントは子ごとに１回トリガーされ、新しい子が追加されるとそのたびに再度トリガーされます。

実行

作成したサンプルプログラム index.html をブラウザにて2画面で起動します。
「名前」と「メッセージ」を入力して送信すると、もう一方のブラウザにも送信結果が反映されることが確認できます。

また、Firebaseコンソールでもデータが登録されたことがリアルタイムで反映されることが確認できます。

アプリ制作の学習サイト

Firebaseを用いたチャットアプリの作成