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

  • Z时代
  • 2024-02-15
  • 分类：IT

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

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

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

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

回答：

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

环境：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 思否面试闯关挑战赛，欢迎正在阅读的你也加入。

以上是 【自问自答】Web 版 IM 消息应该如何设计？ 的全部内容， 来源链接： utcz.com/p/933842.html

回到顶部