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()で値を表示します。

トップへ戻る