CodeCode

なんか色々おぼえ書き。だいたいweb制作関連。

Firebaseでリアルタイムデータベースを使ってみる

firebase

リアルタイムデータベースとは

NoSQLクラウドデータベースを使い、データの保管と同期リアルタイムで行うことができるデータベースです。

セットアップ

Firebaseのセットアップを行います。 プロジェクトの制作やfirebase-toolsのインストールはこちらに書いてあります。
firebase init
今回はDatabeseHostingを使うのでその2つを選択します(スペースキー)。

権限

これからデータベースに書き込んで行くわけですが、まず権限の設定が必要です。 通常はセキュリティのためにログインしていないユーザは読み書きする権限がありません。 今回はテストなので権限を与えてやります*。 Firebase consoleのルールを変更します。 *デプロイする際は変更してください。
{
  "rules": {
    ".read": "true",
    ".write": "true"
  }
}

使ってみる

publick/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>
続いてpublick/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()で値を表示します。
トップへ戻る