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

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

本步驟不需修改此語言。

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

本步驟不需修改此語言。

  if (unsubscribeView) unsubscribeView();
  unsubscribeView = adapter.subscribe((snapshot) => {
    status.textContent = `主畫面收到 ${snapshot.length} 筆 snapshot`;
    renderMessages(snapshot);
  }, "主畫面");

const form = document.querySelector("#message-form");
const input = document.querySelector("#message-input");
const submitButton = document.querySelector("#message-submit");
const failureButton = document.querySelector("#simulate-subscribe-failure");
const retryButton = document.querySelector("#retry-subscription");
  if (unsubscribeView) {
    unsubscribeView();
    unsubscribeView = null;
  }
  status.textContent = "訂閱中…";
  try {
    unsubscribeView = adapter.subscribe((snapshot) => {
      status.textContent = `主畫面收到 ${snapshot.length} 筆 snapshot`;
      renderMessages(snapshot);
    }, "主畫面");
    retryButton.disabled = true;
  } catch (error) {
    status.textContent = `訂閱失敗：${error.message}；舊留言已保留，請重試。`;
    retryButton.disabled = false;
  }
function addMessage(text) {
  const cleanText = text.trim();
  if (!cleanText) {
    status.textContent = "請先輸入留言";
    return;
  }
  if (!unsubscribeView) {
    status.textContent = "主畫面尚未訂閱，請先按重試訂閱。";
    return;
  }
  adapter.push(cleanText);
  input.value = "";
}
failureButton.disabled = false;
submitButton.disabled = false;
failureButton.addEventListener("click", () => {
  adapter.failNextSubscribe();
  startListening();
});
retryButton.addEventListener("click", startListening);
form.addEventListener("submit", (event) => {
  event.preventDefault();
  addMessage(input.value);
});

本練習沒有這個檔案。

本步驟不需修改此語言。

1. 準備

   先在 Solution 開啟 Console subscriber，並記住目前留言與 trace 的訂閱者數量。

2. 操作

   按「模擬下次訂閱失敗」，確認舊留言未被清空；再按「重試訂閱」，新增一筆留言並對照畫面、Console 與 trace。

3. 預期

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