Edited at

FirebaseのRealtime Databaseを触ってみる

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へ直すこと。

スクリーンショット 2019-04-15 23.28.52.png


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!" と入力すると

スクリーンショット 2019-04-15 23.37.43.png

タブBに

非同期で反映される

スクリーンショット 2019-04-15 23.37.55.png

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

スクリーンショット 2019-04-15 23.39.41.png


参考にさせて頂いた記事

https://qiita.com/t_furu/items/665bea8b657c78ab2a22