前端 Vue + WebSocket 連線架構規劃書

這不是真正應用的規畫書，而是基於過往經驗的情境模擬個大綱

需求：

現在我們需要建立一個跨平台聊天室和AI聊天機器人的通訊應用。這意味著前端需要建立主動推送的系統，目前已知以下需求：

1. 跨平台聊天室的系統的團隊採用 Socket.IO。
2. AI聊天機器人不需要保持長連線與雙向推播，因此該團隊希望透過 SSE 連線減低負載。
3. 這是一個實驗性系統，需求未來並不明確，需要相對容易修改與擴展的設計模式。
4. 會在多個服務中嵌入這個聊天系統。

設計：

現在我們遇到幾種狀況：

1. 使用 Socket.IO 可能會帶來一些問題，容易被該框架綁架，導致底層系統難以變更，例如後端可能改成 Serverless 架構。
2. SSE 屬於單向推播，處理邏輯可能跟雙向推播迥異。
3. 需求不明確，需要有彈性的對於連線異常、型態、生命週期等狀況額外處理，因此需要統一介面。
4. 會根據不同系統有各別的商業邏輯，不該出現替換系統或是需求時大規模變動現在的程式碼。

根據上述需求，需要設計一個分層次的系統，並將推播分別拆成 Pub/Sub 兩種模式，且分別業務與系統區塊的部分，大致如下：

負責系統區塊的開發員需要負責應用層與適配層的開發，並將整個方案設計成一個 Module，而業務邏輯的開發人員要在各自的專案中處理 Vue 生命週期的狀況，並透過 Plugin 接口客製不同的應對狀況。

預計效果：

在應用層的實踐中看到以下結果：

```

這裡通常會放上預期的範例程式碼，從這個程式碼中能讓個別開發人員得知自己要寫怎樣的程式碼。

```

如果開發順利，接下來各別負責人員能更容易注入自己的業務邏輯，降低了學習門檻。這使我們能夠更快地建立出最適合特定專案的模式，同時為未來發展提供了更大的靈活性和擴展性。