在購物車頁面的實踐📍

Vue 的生命鉤子

在這邊我們會需要在 onMounted 的時候 connect 到 WebSocket，並且在 onUnmounted 的時候讓 WebSocket 斷開。像這樣：

onMounted(async () => {
  webSocketService.connect()
})

// onUnmounted
onUnmounted(() => {
  webSocketService.disconnect()
})

歐！別忘了要在頁面中引入

import { webSocketService } from "@/websocket/websocket.js"

在 onMounted 的時候設定要用的方法

在引入 WebSocket 之前我們一定寫好了編輯共享購物車商品數量、刪除共享購物車的方法！我們現在只需要在打 API 後通知 WebSocket 發出訊息，讓其他客戶端收到訊息並做出相應行為即可！

所以我們要先定義方法：在收到訊息時，重新整理頁面（之前就有寫好 initializeCartPage 方法，只是在這邊調用）

  webSocketService.onMessage("cartUpdate", async ({ data }) => {
    // 確保只處理相同購物車的訊息
    if (data.groupId === route.params.groupId) {
      await initializeCartPage()
    }
  })

  webSocketService.onMessage("cartDelete", async ({ data }) => {
    // 確保只處理相同購物車的訊息
    if (data.groupId === route.params.groupId) {
      await initializeCartPage()
    }
  })

其實這邊也可以選擇強制更新特定商品並觸發響應式，但為甚麼選擇重新渲染，之後會專們做一期跟大家解釋哈~

在方法中呼叫

接著我們只要在原本 更新共享購物車數量、刪除共享購物車商品 的方法中，加上讓 WebSocket 發送訊息就好！

像是這樣

await 原本的打 API 的方法
// 發送 WebSocket 更新訊息
webSocketService.sendMessage("cartUpdate", {
    // 帶上資料
})

這樣在後端收到訊息後可以廣播給 OPEN 的客戶端，但對於符合資格的客戶，會做出相應的 onMessage 所定義到的行為！

整個流程是這樣的 🔄

1. 用戶修改購物車

2. 前端呼叫 API 更新資料

3. API 成功後，發送 WebSocket 訊息

4. 後端收到訊息後廣播給所有連接的客戶端

5. 其他客戶端收到訊息，檢查是否是自己的購物車

6. 如果是，就重新整理頁面資料

就這樣！現在我們的共享購物車可以即時同步啦！🎉