Node.js - once() 顯示資料於網頁上、on() 隨時監聽資料

可使用 once() 方法將資料顯示一次在網頁上，首先先寫入一筆資料到 Firebase，

寫入資料

在 firebase 中在 folder 路徑中寫入一筆字串資料 this is a data。

const database = firebase.database();
database.ref('folder').set('this is a data')

firebase

once() 讀取一次性資料

在 template 上寫一個 h1 標籤，等等要用這個標籤來顯示 Firebase 的資料。

index.html

<h1 id="title">This is title</h1>

可想而知目前畫面上出現的文字是 h1 的靜態文字，如果想要將資料庫的文字呈現在網頁上，可按照下列步驟：

指到資料路徑並取得一次性資料

上方可以看到這次資料的路徑是 folder，所以先取得資料路徑：

const database = firebase.database();

// 綁定網頁元素
let title = document.querySelector("#title");
// 指定到資料路徑
const folder = database.ref("folder");
//讀取一次資料內容
folder.once("value", function (snapshot) {
  console.log(snapshot.val());
});

此時再打開 Chrome 的開發人員工具的 console，會看到取到原本在資料庫的字串。

dev tool > console

將資料賦值給變數

已經取得資料的值，再把其值賦予給變數，讓資料渲染在網頁上。

const database = firebase.database();

// 綁定網頁元素
let title = document.querySelector("#title");
// 指定到資料路徑
const folder = database.ref("folder");
//讀取一次資料內容
folder.once("value", function (snapshot) {
    // 把資料賦值到變數
  title.textContent = snapshot.val();
});

使用 once 的方法，第一個參數是要取得的 value，要用字串，第二個是接 callback function，參數可自定義名稱，這邊使用 snapshot(快照)，在使用其參數的 val() 取得資料內容，網頁重新整理後，畫面也會變成跟資料庫一樣的字串了！

on() 隨時監聽

前面是讀取一次性資料，如果資料有更新則需要重新整理網頁，Firebase 才會同步更新，而使用 on() 可以透過更新 Firebase 資料內容，立即渲染在網頁上，其語法只要將 once 改為 on 即可。

const database = firebase.database();

// 綁定網頁元素
let title = document.querySelector("#title");
// 指定到資料路徑
const folder = database.ref("folder");
//讀取一次資料內容
folder.on("value", function (snapshot) {
    // 把資料賦值到變數
  title.textContent = snapshot.val();
});