前端系统设计 - 设计聊天系统 (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) 要如何设计?