[Firebase] Firebase初使用(4)：即時更新資料

這是Firebase初使用的最後一篇，也就是正式完成那個簡單到不行的網頁留言版。

在這篇我們要讓我們的網頁能對firebase的資料變動做即時的反映。




我們要修改上一篇寫的讀取資料那部分的程式碼。
也就是將這部分註解掉

// db.collection('Notes').get().then((snapshot) => {
//     console.log(snapshot);
//     snapshot.docs.forEach(doc => {
//         console.log(doc);
//         var note = noteView(doc.id, doc.data()["Name"], doc.data()["Message"]);
//         noteList.insertAdjacentHTML("afterbegin", note);
//     });
// });

改建立一個real-time listener。
這個listener可以得到某collection的document變動 (change)。
change有分成兩種，一種是"added"另一種是"removed"。
"added"的話我們就照上面那樣新增一 noteView()並插入到index.html適當的位置中。
"removed"的話則是要做removeChild()刪除DOM的動作

//real-time listener
db.collection('Notes').onSnapshot(snapshot => {
    let changes = snapshot.docChanges();
    changes.forEach(change => {
        doc = change.doc;
        if (change.type == 'added') {
            let note = noteView(doc.id, doc.data()["Name"], doc.data()["Message"]);
            noteList.insertAdjacentHTML("afterbegin", note);
        } else if (change.type == "removed") {
            let removed_note = noteList.querySelector('[data-id = ' + doc.id + ']');
            noteList.removeChild(removed_note);
        }
    })
})

如此我們的留言板就會持續監看"Notes" collection是否有什麼change
一有change就會進入上面的函式，並依照我們寫的邏輯做相應的增加或刪除動作。


這樣我們的網頁留言板就算大功告成了！


最後在放張完成圖吧，真的是陽春到不行耶XD

以上，就是Firebase初使用的簡單紀錄和教學。

若想要快速開發網路應用，Firebase作為後端真的是簡單好入門。
當中也還有許多功能我都沒用，之後還會想要再更深入研究，但目前就先這樣吧。