0%

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

node

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

寫入資料

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

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

firebase

title

once() 讀取一次性資料

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

index.html

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

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

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

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

1
2
3
4
5
6
7
8
9
10
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

console

將資料賦值給變數

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

1
2
3
4
5
6
7
8
9
10
11
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 即可。

1
2
3
4
5
6
7
8
9
10
11
const database = firebase.database();

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