先判斷是否需要即時更新
顧客正在等待短時間內有意義的變化,例如付款結果確認或門市取貨準備完成,即時訂單頁面才特別有用。若下一個物流掃描可能相隔數小時,持續連線未必值得。商戶應先列出哪些狀態需要即時送達、哪些在重新載入頁面時顯示已足夠。訂單及付款紀錄才是事實來源,WebSocket 只是把紀錄變化傳給畫面的通道。
畫面用語要把連線與訂單分開。「已連接」只代表可接收新訊息,不代表付款成功;「重新連接」只表示通道恢復中,不等於重新處理訂單。斷線時可保留上次經核實的訂單狀態及核對時間,並說明最新消息可能延遲。不要用不停轉動的圖示遮蓋已確認的訂單,也不要因連線重新開啟便顯示綠色成功提示。
落實技術前可比較三條路:狀態變化不頻密時,手動重新整理或間歇 HTTPS 查詢可能足夠;單向推送可考慮伺服器事件;需要雙向及及時互動,或現有平台已可靠支援時,才較有理由使用 WebSocket。不論選哪種通道,網絡訊息送達都不等於訂單狀態已更改。只有伺服器完成紀錄及權限核對,畫面才可展示該轉變;驗收應圍繞這條原則。
先讀可信快照,再接收更新
頁面開啟時,先經正常應用程式路線讀取已授權的訂單快照,內容包括訂單識別碼、目前狀態、由伺服器產生的版本或序號,以及狀態紀錄時間。之後只訂閱該訂單的更新。若快照與訂閱之間可能漏掉事件,可先連線暫存更新,再取得快照;或訂閱後再次查詢作核對。這是應用程式層面的設計,WebSocket 協定本身不會提供完整訂單歷史。
收到推送訊息時,應按版本或遞增序號判斷是否需要更新,不能任由任何訊息覆蓋畫面。重複或較舊事件可忽略;若發現序號缺口、未知狀態,或收到另一訂單的事件,應重新讀取權威快照並留下不含敏感資料的診斷紀錄。不可假定訊息只會送一次。重新連接後可能再次收到舊事件;斷線期間亦可能漏掉更新,除非伺服器另有明確的補發機制。
例如頁面最初讀到訂單甲「付款待確認」、版本 8;其後即時訊息送來版本 9「付款已確認」,畫面更新。顧客搭車入隧道後手機斷線,重連時卻收到延遲的版本 8。系統不能退回待確認,而應查詢伺服器最新且已授權的快照;若結果是版本 10「包裝中」,便顯示包裝中。這些版本號只是設計示例,不是任何商店的實測數據。
重連時避免重複動作
瀏覽器 WebSocket 介面提供開啟、訊息、關閉及錯誤事件。前端要按實際連線狀態處理,但錯誤事件本身不能解讀成訂單失敗。重試可採有限度的逐步延長等待並加入變化,避免網絡事故後大量分頁同一刻連回。頁面關閉、訂單已毋須即時跟進或登入失效時,應停止重試。自動恢復較久時,保留手動重新整理仍然有用。
重新連線的目的只是接收資料,不能因此再次提交購買。若付款或取消指令當時回應不明,應透過該交易本身的防重複設計及伺服器結果查詢處理,而非用連線狀態推測成功。即時頁面應展示最新已知結果及安全的下一步。把顯示狀態與引發狀態改變分開,可減少斷線後重複下單或重複操作的風險。
瀏覽器的上一頁及下一頁亦會帶來舊畫面。MDN 建議在 pagehide 關閉 WebSocket,因開放連線可能影響前後頁快取;從快取還原的 pageshow 則可按需要重新連接。還原後的頁面可能保存了舊文字,應先讀取最新訂單狀態,才把畫面當成現況。測試顧客先看訂單、轉往帳戶頁,再在出貨後按返回;舊版「未出貨」不能因瀏覽器保留原來腳本狀態而重新出現。
每次訂閱均須驗證權限
可接收訂單更新的連線屬私人資料通道。系統須按所選架構驗證連線或緊接的協定步驟,核對顧客是否有權查看該訂單;訂閱目標改變時亦要再次驗證。不能讓瀏覽器任意填入訂單編號,只靠畫面上沒有連結作保護。登入失效或權限撤銷後,連線應終止或受限制,下一次快照查詢也要安全地失敗。可重用憑證不應放進 WebSocket 網址。
RFC 6455 說明瀏覽器連線會帶上 Origin,而只供指定網站使用的伺服器應核對預期來源。這有助阻止其他網站的瀏覽器腳本濫用連線,但 Origin 不是顧客身份驗證;非瀏覽器程式可自行填寫該值。因此仍須使用合適的安全傳輸、核對來源,並在伺服器逐筆執行會話及訂單權限檢查。持續連線收到的資料也不會自動可信,訊息類型及大小應有限制。
營運紀錄要足夠查錯,但無須把每條私人更新的完整內容寫入日誌。可記下連線嘗試、權限拒絕、意外序號缺口及重新核對結果,並使用員工有權查閱的訂單參照與短追蹤編號。訊息佇列或伺服器節點故障時,客服應能分辨底層訂單有沒有更改,以及顧客頁面是否追上。宣傳文字不宜把「即時」說成絕對保證;顧客更需要真實的最後更新時間及其他查詢途徑。
把中斷當作正常情境驗收
驗收情境應包括 Wi-Fi 中斷、手機轉換網絡、電腦睡眠、同時開兩個分頁、按返回還原頁面、伺服器重啟、過期 cookie,以及顧客打開舊書籤。每次都要分開核對連線提示與訂單狀態。舊事件不能推翻新狀態,序號缺口要觸發重新核對,已完成付款既不能被隱藏,也不能憑空出現。測試應使用受控測試訂單,不應拿真實顧客交易冒險。
測試者可按帶版本的事件示例實際操作,記下上次核實狀態及時間、短暫中斷提示,以及最後核對後的狀態。再查伺服器紀錄,證明畫面所屬帳戶及訂單與已登入顧客一致。只看到 WebSocket 的 open 事件,不足以證明顧客得到正確答案。若頁面持續斷線,仍要說明可怎樣重新整理、聯絡客服,或經一般帳戶頁面查詢訂單。
最後應指定即時功能變得不穩定時由誰停用。快照查詢路線要維持可用,頁面降級後清楚說明更新可能延遲。若客服收到畫面時間與伺服器實際狀態不一致的個案,應以個案紀錄改善流程,而非聲稱未經量度的可靠性提升。真正的驗收目標是中斷時仍能如實交代訂單,不是永遠顯示一個綠色連線點。
進行前先確認
- 頁面有否把連線中斷與訂單或付款結果分開?
- 漏收或重收事件後,能否重新核對而不倒退狀態?
- 每筆訂單訂閱是否有權限檢查,快照後備路線是否可用?


