リアルタイムデータベースとは
NoSQLクラウドデータベースを使い、データの保管と同期リアルタイムで行うことができるデータベースです。セットアップ
Firebaseのセットアップを行います。 プロジェクトの制作やfirebase-toolsのインストールはこちらに書いてあります。firebase init
今回はDatabeseとHostingを使うのでその2つを選択します(スペースキー)。権限
これからデータベースに書き込んで行くわけですが、まず権限の設定が必要です。
通常はセキュリティのためにログインしていないユーザは読み書きする権限がありません。
今回はテストなので権限を与えてやります*。
Firebase consoleのルールを変更します。 *デプロイする際は変更してください。{
"rules": {
".read": "true",
".write": "true"
}
}
使ってみる
public/index.htmlを変更していきます。 <body></body>の間を以下に変更します。<div id="message">
<h1>メッセージ</h1>
<input type="text" id="message_input">
<p id="message_output"></p>
</div>
<script src="app.js"></script>
続いてpublic/app.jsに処理を書いていきます。document.addEventListener('DOMContentLoaded', () => {
let $input = document.querySelector('#message_input');
let $output = document.querySelector('#message_output');
})
入出力に必要な要素を取得しておきます。// データベースへの参照
let db = firebase.database();
// '/message'への参照
let messageRef = db.ref('/message');
データベース自体を参照をするためにfirebase.database()を実行します。
次にref()を使って、データベースのデータを参照します。$input.addEventListener('input', e => {
let target = e.target;
messageRef.set(target.value);
})
テキストボックスの変化に合わせて、値をset()でデータの書き込みを行います。 このとき、Firebase consoleのDatabaseを開いた状態で、テキストボックスに入力すると、その内容がデータベースに書き込まれるのを確認できます。messageRef.on('value', text => {
$output.textContent = text.val();
})
on()を使って値が得られた時に、val()で値を表示します。