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;
###サンプルデータベース
サンプルのデータベースはこちらです。
counterというコレクションに、countというフィールドを設定しています。
###リアルタイム更新を行うソースコード
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;
この状態でデータベースの値を変更すると、ブラウザ上の値にも即反映されます。
さらにsetDocでデータベースへの書き込み処理を追加すれば
ブラウザとデータベースのどちら側で値を変更しても、即反映されます。
以上です。
###参考サイト