展開檔案卡查看必要差異；只有程式碼區可以橫向捲動。

前一步與本步驟沒有實質差異。

本步驟不需修改此語言。

前一步與本步驟沒有實質差異。

本步驟不需修改此語言。

  list.textContent = `尚未完成 ${snapshot.length} 筆渲染`;

const consoleStartButton = document.querySelector("#console-start");
const consoleStopButton = document.querySelector("#console-stop");
let unsubscribeConsole = null;
function createMessageItem(message) {
  const item = document.createElement("li");
  item.dataset.id = String(message.id);
  item.textContent = String(message.text);
  return item;
}
  list.replaceChildren(...snapshot.map(createMessageItem));
function startConsoleSubscriber() {
  if (unsubscribeConsole) return;
  unsubscribeConsole = adapter.subscribe((snapshot) => {
    console.log("Console subscriber snapshot：", snapshot);
  }, "Console");
  consoleStartButton.disabled = true;
  consoleStopButton.disabled = false;
  refreshSubscriberCount();
}
function stopConsoleSubscriber() {
  if (!unsubscribeConsole) return;
  unsubscribeConsole();
  unsubscribeConsole = null;
  consoleStartButton.disabled = false;
  consoleStopButton.disabled = true;
  refreshSubscriberCount();
}
consoleStartButton.disabled = false;
consoleStartButton.addEventListener("click", startConsoleSubscriber);
consoleStopButton.addEventListener("click", stopConsoleSubscriber);

本練習沒有這個檔案。

本步驟不需修改此語言。

1. 準備

   開啟 Checkpoint 2 的 Console，並找到第二訂閱者的「開啟」與「取消」按鈕。

2. 操作

   開啟 Console subscriber，確認它收到初始 snapshot；再取消，對照 trace 中的 unsubscribe 與訂閱數。

3. 預期

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