1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Next.jsでFirebase9のリアルタイム更新機能を使う

Posted at

Next.jsでFirebase9のリアルタイム更新機能を使います。

###サンプルコード

100から始まり、+を押すと1を加え、ーを押すと1減らすプログラムです。
このコードをベースにします。

import React from 'react';
import {useState, useEffect} from "react";

export const UserCount = React.createContext();

function  Test() {

  const[count, setCount] = useState(100);

  return (
    <>
      <div style={{ textAlign: 'center' }}>
        <h1>Test</h1>
          <p>{count}</p>
          <button onClick={() => setCount(count - 1)}>-</button>
          <button onClick={() => setCount(count + 1)}>+</button>
      </div>
    </>
  );
}

export default Test;

スクリーンショット 2021-12-28 17.50.12.png

###サンプルデータベース

サンプルのデータベースはこちらです。
counterというコレクションに、countというフィールドを設定しています。

スクリーンショット 2021-12-28 17.21.14.png

###リアルタイム更新を行うソースコード

onSnapshotを使用します。

import React from 'react';
import {useState, useEffect} from "react";
import {collection, doc, query, onSnapshot} from "firebase/firestore";
import {db} from '/lib/firebase';

export const UserCount = React.createContext();

function  Test() {

  const[count, setCount] = useState(100);

  //データを表示する処理(初回のみ)
  useEffect(async()=> {

    //DBリアルタイム更新設定
    const q = query(collection(db, "counter"));
    const unsub = onSnapshot(q, (queryCounterSS) => {

      let l_count = 0;
      queryCounterSS.forEach((doc) => {
        if (doc.exists()) {
          console.log("Current data: ", doc.data().count);
          l_count = doc.data().count;
        }
      });

      setCount(l_count);
    });
  },[]);


  return (
    <>
      <div style={{ textAlign: 'center' }}>
        <h1>Test</h1>
          <p>{count}</p>
          <button onClick={() => setCount(count - 1)}>-</button>
          <button onClick={() => setCount(count + 1)}>+</button>
      </div>
    </>
  );
}

export default Test;

この状態でデータベースの値を変更すると、ブラウザ上の値にも即反映されます。

スクリーンショット 2021-12-28 17.54.32.png

スクリーンショット 2021-12-28 17.54.49.png

さらにsetDocでデータベースへの書き込み処理を追加すれば
ブラウザとデータベースのどちら側で値を変更しても、即反映されます。

以上です。

###参考サイト

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?