前端系統設計 - 設計聊天系統 (Chat System)

本篇詳細解說本收錄在 E+ 的前端系統設計專題

設計聊天系統 (Chat System) 很普遍，非常多公司都有做，也是系統設計面試很經典的問題。這邊我們會列下設計聊天應用的前端，應該要考量什麼面向，協助大家在準備面試時，知道要往哪些方向思考。

如果你想看每個思考面向，我們會如何回答，可以在 E+ 的《前端系統設計 - 設計聊天系統 (Chat System)》一文讀到。

先釐清需求

不論在面試，或者在工作時，當聽到要設計一個聊天系統，一定要先釐清需求。假如面試官問你，或者工作時 PM 跟你提說要設計聊天系統，你會有哪些想釐清的問題呢? 在往下讀之前，不妨自己先想一想。

在思考這問題時，推薦可以先回到使用者的角度，平常大家有用的不論是跟朋友家人用的 Line，或者 Instagram 中的聊天，又或者 Discord，這些都是聊天系統的範疇。可以想看看，這些不同聊天系統，分別有哪些不同，可以從這些差異去想要釐清的問題。

關於聊天系統，以下的問題是推薦要釐清的：

• 這個聊天系統的目標用戶是誰? 上面提的 Line、Instagram、Discord 目標族群很不同，都是聊天系統，但設計上會有差異
• 最基本的功能涵蓋什麼? 收發訊息外，需要有歷史記錄嗎? 要有聊天對象列表嗎?
• 收發的訊息類型是純文字的嗎? 還是要支援不同多媒體? 例如圖片、語音、影片等
• 聊天是即時的嗎? 還是非即時的聊天?
• 聊天都是 1 對 1 的嗎? 需要有群組聊天功能嗎?
• 要支援離線 (offline) 功能嗎?

除了上面這些，還有細部可以問的，包含：

• 要有通知的功能嗎?
• 要有對方正在輸入訊息的功能嗎? (例如 Discord 可以看到別人正在打字中)
• 要有按表情符號的功能嗎? (例如 Discord 每個訊息都可以按表情符號)
• 要支援收回訊息嗎?
• 要支援國際化 (i18n) 嗎?

從架構的角度看的技術討論

我們先從最基本的 1 對 1 聊天，要支援聊天對象列表、歷史訊息，要是即時聊天，僅需用純文字，同時要支援離線功能。當看到上面這些功能，大家會如何設計前端呢?

聊天訊息要包含哪些狀態?

對前端來說，狀態管理往往是挑戰之一。對於 1 對 1 聊天，第一個要思考的是聊天訊息的狀態。以常見的聊天應用，該包含哪些狀態? 為什麼要有這些? 這部分如果設計的好，對功能開發也會比較容易照顧不同面向。

渲染方式選擇，要選 CSR 或 SSR?

對於前端來說，不同種類的應用，會分別適合不同類的渲染方式。假如今天被問說聊天應用該選哪一種，你會如何回答呢? 回答這問題前，可以先思考，CSR 與 SSR 分別適用的情境。在思考哪個特性比較適合聊天應用。

離線支援選哪種存儲方案?

現在有許多聊天應用都有支援離線，換句話說，今天即使網路突然斷線，也可以點其他聊天對象，去看先前聊天過的歷史訊息，此外也可以發送訊息 (但要等到重新有網路後才會發送)。要做到離線支援，可以分兩塊來討論。第一塊是假如用戶離線後重新整理，要如何確保有 HTML、CSS、JavaScript? 你會選擇用什麼來存呢?

此外，聊天的訊息應該被存在客戶端的哪裡呢? 談到前端的存儲，多數人第一時間可能會想到 cookie、sessionStorage 以及 localStorage (差別詳見此篇)。除此之外，先前我們也有介紹過 IndexedDB。在這些選項中，你會選哪一個呢?

與後端共同制定 API

前端系統設計面試，也常會被問到跟後端共同制定的 API 該如何設計，以聊天應用來說，最基本的需求來說，至少需要以下的 API 來滿足：

• 獲取聊天對象列表
• 獲取歷史訊息
• 傳送訊息
• 接收訊息

大家可以思考一下，被問到這些接口，你會如何設計呢?

基本追問題

除了上面的討論面向外，很可能在面試中有以下的追問：

• 追問一：如何在瀏覽器的多個分頁同步
• 追問二：如何實作即時聊天 (該用哪個協定? 為什麼?)
• 追問三：效能優化可以從哪些面向切入

延伸問題

以下列出幾個在面試中常見的延伸問題。推薦大家也可以準備：

• 延伸問題一：支援各種類型對話該如何設計? 例如圖片、語音?
• 延伸問題二：表情符號功能要如何設計?
• 延伸問題三：群組聊天該如何設計?
• 延伸問題四：串聊 (Threads) 要如何設計?