FirebaseのRealtime Databaseをテスト的に使用した際のログ

Realtime Databaseとは？

NoSQL クラウドデータベースでデータの保管と同期を行うことができます。データはすべてのクライアントにわたってリアルタイムで同期され、アプリがオフラインになっても、利用可能な状態を保ちます。

とのこと
ドキュメント : https://firebase.google.com/docs/database/

準備

先にプロジェクトを作成し、Hostingを済ませて置くと楽。
https://qiita.com/rakuraku0615/items/2e2f77437d3557842022

プロジェクトの構成

$ tree
.
├── firebase.json
└── public
    └── index.html

1 directory, 2 files

ローカルではこんなプロジェクトを用意

この資料のゴール

Realtime Databaseを利用したテストwebページを作成する。

テキストボックスにテキストを入力すると、別タブで開いている同ページにて非同期で反映される。

作業

コンソールより、Firebase接続用のスニペットを獲得する

<script src="https://www.gstatic.com/firebasejs/5.9.4/firebase.js"></script>
<script>
  // Initialize Firebase
  var config = {
    apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    authDomain: "xxx-xxxx-x-xxxxx.firebaseapp.com",
    databaseURL: "https://xxx-xxxx-x-xxxxx.firebaseio.com",
    projectId: "xxx-xxxx-x-xxxxx",
    storageBucket: "xxx-xxxx-x-xxxxx.appspot.com",
    messagingSenderId: "xxxxxxxxx"
  };
  firebase.initializeApp(config);
</script>

テスト用HTMLを準備

<html>                                                                                                                                                                                   
    <head>                                                                                                                                                                               
        <title>Firebase test 1</title>                                                                                                                                                           <script src="https://www.gstatic.com/firebasejs/5.8.6/firebase.js"></script>                                                                                                     
        <script>                                                                                                                                                                         
            // Initialize Firebase                                                                                                                                                       
            var config = {                                                                                                                                                               
                apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",                                                                                                                       
                authDomain: "xxx-xxxx-x-xxxxx.firebaseapp.com",                                                                                                                          
                databaseURL: "https://xxx-xxxx-x-xxxxx.firebaseio.com",                                                                                                                  
                projectId: "xxx-xxxx-x-xxxxx",                                                                                                                                           
                storageBucket: "xxx-xxxx-x-xxxxx.appspot.com",                                                                                                                           
                messagingSenderId: "xxxxxxxxx"                                                                                                                                      
            };                                                                                                                                                                           
            firebase.initializeApp(config);                                                                                                                                              
        </script>                                                                                                                                                                        
        <script>                                                                                                                                                                         
            var db = firebase.database();                                                                                                                                                
            var chatAll = db.ref("/chat/all");                                                                                                                                                                                                                                                                                      
            chatAll.on("value", function(snapshot) {                                                                                                                                     
                document.getElementById("textMessage").innerText = snapshot.val().message;                                                                                               
            });                                                                                                                                                                                                                                                                                                                                 
            var changeData = function(){                                                                                                                                                 
                var message = document.getElementById("message").value;                                                                                                                  
                chatAll.set({message:message});                                                                                                                                          
            }                                                                                                                               
            window.onload = function() {                                                                                                                                                 
                document.getElementById("btnChangeData").onclick = changeData;                                                                                                           
            };                                                                                                                                                                           
        </script>                                                                                                                                                                        
    </head>                                                                                                                                                                              
    <body>                                                                                                                                                                               
        <p>Realtime Database</p>                                                                                                                                                  
        <ul>                                                                                                                                                                             
            <li id="textMessage"></li>                                                                                                                                                   
            <li><input type="text" name="" id="message"></li>                                                                                                                            
            <li><input type="button" value="Update" id="btnChangeData"></li>                                                                                                               
        </ul>                                                                                                                                                                            
    </body>                                                                                                                                                                              
</html>

Databaseを開始する

Database => Realtime と遷移し、Databaseを開始する

セキュリティの制限を解放

以下の値にセキュリティルールを更新する。

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

＊こちらは全書き込み、読み込みを解放してしまうため、テストが終わったらfalseへ直すこと。

deployする

作業プロジェクトをdeployする

 firebase deploy --token "1/hO3xxxxxxxxxxxxxxxxxxxxxxxx........."                                                                

=== Deploying to 'xxx-xxxx-1-xxxx'...

i  deploying hosting
i  hosting[xxx-xxxx-1-xxxx]: beginning deploy...
i  hosting[xxx-xxxx-1-xxxx]: found 2 files in public
✔  hosting[xxx-xxxx-1-xxxx]: file upload complete
i  hosting[xxx-xxxx-1-xxxx]: finalizing version...
✔  hosting[xxx-xxxx-1-xxxx]: version finalized
i  hosting[xxx-xxxx-1-xxxx]: releasing new version...
✔  hosting[xxx-xxxx-1-xxxx]: release complete

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/xxx-xxxx-1-xxxx/overview
Hosting URL: https://xxx-xxxx-1-xxxx.firebaseapp.com

テスト

タブAで "hoo!" と入力すると

タブBに
非同期で反映される

ちなみにコンソールを確認すると、このようなデータ構造でストアされている

参考にさせて頂いた記事