CHAPTER 24 · PRACTICE WORKSPACE

即時資料模型與 Firebase 介面

完成可追蹤、可取消、可模擬訂閱失敗並重試的 memory adapter 即時留言原型，不冒充 Firebase

02 Checkpoint 1 1/3
  1. 01Starter讀懂作品骨架
  2. 02Checkpoint 1加入第一項能力
  3. 03Checkpoint 2累積第二項能力
  4. 04Solution核對完整結果

TASK STATUS

三項任務目前狀態

TASK-01已完成

訂閱主畫面並留下 adapter trace

修改檔案：script.js

完成後看見：主畫面 subscriber 收到初始 snapshot，trace 顯示 subscribe 與 notify

TASK-02本階段處理

安全渲染並管理第二 Console subscriber

修改檔案：script.js

完成後看見：留言以純文字渲染，Console subscriber 可訂閱並可 unsubscribe

TASK-03稍後處理

模擬訂閱失敗、復原重試並新增留言

修改檔案：script.js

完成後看見：失敗時保留舊留言且無幽靈 listener，retry 後畫面與 Console subscriber 同時收到新 snapshot

WORKSPACE

本階段實作區

已完成 TASK-01；先核對可見結果，再前往 TASK-02。

FOCUS TASK · TASK-02

現在只處理：安全渲染並管理第二 Console subscriber

修改：script.js

完成後：留言以純文字渲染，Console subscriber 可訂閱並可 unsubscribe

講解時展開：2 個小型比較

純文字節點 vs HTML｜留言內容安全渲染

比較：留言資料應以純文字放入節點，避免內容被當成標記執行。

現在做：在 Checkpoint 2 先用 renderMessages([{id: "unsafe", text: "<img id='unsafe-message' src=x>"}]) 重跑，確認畫面只顯示原始文字且沒有 #unsafe-message；再開啟 Console subscriber，記錄 subscriber=2、Console 初始 snapshot，最後取消並確認 subscriber=1、trace 出現 unsubscribe。

看預期與證據

預期：XSS 測試字串只顯示原始文字、沒有 #unsafe-message；開啟後 subscriber=2 且收到 Console 初始 snapshot，取消後 subscriber=1 且 trace 有 unsubscribe。

證據：留下 XSS 元素數量、留言文字、開啟／取消前後 subscriber 數與 trace，證明純文字渲染和第二 subscriber 的取消都可重跑。

第二個 subscriber｜訂閱與取消要成對

比較：建立 Console subscriber 後要能 unsubscribe，否則每次重試可能重複收到通知。

現在做：在 Checkpoint 2 只操作第二個 subscriber：開啟後確認 subscriber=2 與 Console 初始 snapshot，連按開啟不增加數量；取消後確認 subscriber=1、Console 取消按鈕 disabled、trace 有 unsubscribe，之後 push 不再出現 Console 更新。

看預期與證據

預期：連按開啟不會超過 subscriber=2；取消後 subscriber=1、Console 取消按鈕 disabled，之後 push 不再出現 Console 更新。

證據：留下開啟、重複開啟、取消與取消後 push 四個節點的 subscriber 數、按鈕狀態與 Console log，證明 listener 建立與取消成對。

需要排錯時查看：任務循環（觀察 → 預測 → 實作 → 故障 → 驗收）
  1. A｜觀察：開啟 Checkpoint 2 的 Console，並找到第二訂閱者的「開啟」與「取消」按鈕。
  2. B｜預測：開啟 Console subscriber，確認它收到初始 snapshot；再取消，對照 trace 中的 unsubscribe 與訂閱數。
  3. C｜實作：在 script.js 的 createMessageItem()、renderMessages()、startConsoleSubscriber()、stopConsoleSubscriber() 完成「安全渲染並管理第二 Console subscriber」，一次只處理本任務責任。
  4. D｜故障：若結果不一致，先依原操作重現，再檢查 createMessageItem()、renderMessages()、startConsoleSubscriber()、stopConsoleSubscriber() 與 script.js，最後重跑原操作。
  5. E｜驗收：留言以純文字渲染，Console subscriber 可訂閱並可 unsubscribe

完成條件：DONE-02：留言以純文字渲染，Console subscriber 可訂閱並可 unsubscribe

MEMORY ADAPTER（只練介面，不是 Firebase 連線）

可追蹤的即時留言

本頁每次重新整理都會建立獨立記憶體，不會跨分頁同步。

尚未訂閱

訂閱生命週期控制

目前 subscriber：0 個

    Adapter trace

      CONTINUE

      繼續完成 TASK-02

      前往 Checkpoint 2，依要求完成「安全渲染並管理第二 Console subscriber」。

      前往 Checkpoint 2：完成 TASK-02

      CHAPTER HANDOFF

      從一次提交，交棒到持續訂閱

      接收第 23 章：沿用已驗證的 payload 與一次提交生命週期；本章不重做表單驗證，改追蹤初始 snapshot、後續 push 與 unsubscribe。

      交給第 25 章：完成後帶著 memory adapter 的 subscriber trace、安全 render、取消訂閱與失敗重試證據；下一章直接加入 uid 與權限判斷，不把 memory adapter 宣稱成 Firebase。

      前往第 25 章：身份、uid 與權限模型