【自问自答】Web 版 IM 消息应该如何设计？

Question

之前被面试官问了这个问题，感觉回答的不太好。

可以从架构设计、组件划分、模块划分、常见问题等方面来回答这个问题。

也可以从适用环境（pc、m、混合开发）、技术栈等角度来回答。

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。

Answer 1

我们之前的那个产品可以理解为微信，所以遇到样式的问题就看一眼微信就可以了。

环境：PC(windows) 客户端混合开发
技术栈：Vue

细分组件

• 会话组件（chat.vue）

  • 会话列表组件（chat-session.vue）

    • 搜索组件（search-bar.vue）

    • 单个会话组件（session.vue）

      • 单聊会话列表组件（头像、昵称、最后一条消息、未读数量、时间、icon、置顶、屏蔽）
      • 群聊会话列表组件（合成头像、其他同上）
      • 功能会话组件（折叠的群聊、订阅号）

  • 聊天记录组件（chat-window.vue）

    • 聊天窗口头部组件（chat-header.vue）

    • 聊天记录组件（message.vue）

      • 文本消息
      • 图片消息
      • 视频消息
      • 等等

    • 输入框组件（message-input.vue）

      • 工具栏（message-bar.vue）表情、发红包、音视频通话等等
      • 表情选择组件（）大哭、大兵什么的

• 好友组件（friend.vue）

  • 好友列表组件（Friend-List.vue）
  • 搜索栏组件（同上）
  • 单个会话组件（同上）

• 零碎组件

  • 好友资料组件（Friend-Profile.vue）
  • 红包组件
  • 好友申请组件
  • 基础设置组件

细分模块

• 视图模块：主要负责用户界面的展示和交互，就是刚才的 Vue 组件。
• 应用数据模块：负责业务逻辑的处理和调度，主要是 Vuex 状态管理，比如说全局统一的播放器（播放音频）。当然也会有一些缓存分级的策略。

• 通信模块

  • API 封装，与后端通信
  • socket 封装，推送的分发
  • bus 封装。状态维护，广播分发
  • bridge 封装。 与客户端通信

• 底层能力模块。调用底层基础能力

  • 网络通信 axios 的封装，允许自定义，比如说使用客户端的能力。
  • 本地存储。使用 web indexDB 或者 bridge 通知用户。

当然了，架构模块设计这东西，基本都是在当前场景下，最适合公司的。
需要综合考虑业务需求、性能优化、代码复用和可维护性等多个因素，当然也有可能还有公司的人员、时间成本等等。

---

常见问题（我后面再补吧。我突然想到我可以直接提问啊）

1. 如何设计数据结构呢？

   1. 消息结构设计 【自问自答】Web IM 消息如何设计消息的结构呢？
2. 消息重发重复的问题怎么解决？【自问自答】IM 消息失败重试应该怎么显示呢？
3. 收消息的频率？【自问自答】Web IM 消息收发消息的频率如何控制呢？
4. 未读消息的留存？【自问自答】Web IM 消息未读消息这块功能如何实现？
5. 缓存如何设计？【自问自答】在 IM 消息中如何使用缓存来降低服务端压力？

6. 长列表性能优化

   1. https://segmentfault.com/q/1010000044385007/a-1020000044385408
7. 消息撤回、敏感词问题等。【自问自答】在 IM 消息中消息撤回、敏感词过滤如何设计？

8. 兼容性问题、移植问题、扩展问题、版本控制问题？

   1. sort
   2. 如何移植到纯 web 端？【自问自答】在 IM 消息设计中，如何支持快速移植？

   3. 消息类型如何扩展、会话类型如何扩展？新旧版本如何兼容？

      1. 【自问自答】在 IM 消息设计中，新旧版本，如何兼容？

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。