Firebase Realtime

啟用

Realtime Database -> 建立資料庫

規則

Realtime Database -> 規則

預設都是 false，先改為 true 方便測試

實際上線需依據狀況設定為 false，避免資料安全性問題

建立應用程式

1. 專案總覽 -> 專案設定 -> 網頁應用程式 </> 符號
2. 輸入程式暱稱(英文數字) -> 不要 firebase 託管
3. 複製 const firebaeConfig 設定值

初始化

引用 SDK

<script src="https://cdnjs.cloudflare.com/ajax/libs/firebase/8.10.0/firebase.js"
integrity="sha512-7NBxPO/qRUrKc+Wi9GbYz0YEzMpi2UMP3mtLcswnvzI0vUFP5Jb7HNVd1V8NmEhXpSe3ZLsoGEhwRHpAZDpYPQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

建立 firebase.js -> 將剛剛複製的 firebaseConfig 貼上

const firebaseConfig = {};

const model = firebase.initializeApp(firebaseConfig, firebaseConfig.appId);

async function write(value, path) {
    try {
        await model.database().ref(path).set(value)
        return true
    } catch (err) {
        return false
    }
}

async function read(path) {
    let snapshot = await model.database().ref(path).get()
    return snapshot.val()
}

function listen(path, callback) {
    model
        .database()
        .ref(path)
        .on('value', (snapshot) => {
            if (typeof callback === 'function') {
                callback(snapshot.val())
            }
        })
}

;(async () => {
    let result = await write('BBB', 'test')
    console.log(result)

    let response = await read('test')
    console.log(response)

    listen('test', (value) => {
        console.log(value)
    })
})()

demo