iOS 客户端 IM 以及列表 UI 框架_im客户端架构

一、背景及简介

1.1 背景

由于工作中 IM 原有设计对于新增聊天场景的支持性不佳、拓展困难等一系列原因，团队计划发起一次 IM 重构，这次重构由我来主导，计划在新的聊天业务中采用新的设计方案来开发，后期再逐步替代现有方案。这次把新方案的工作内容整理了整理，分享给大家，多有疏漏，敬请指正。

1.2 简介

本文主要介绍以下几个部分：

1. 当前聊天业务基本工作原理；
2. 使用场景以及新设计方案需要实现的目标；
3. 新方案功能模块划分、模块架构设计和关键类接口的设计；
4. 后续迭代替换现有业务的思路。

二、基本工作原理

下面会介绍当前项目中聊天部分的一些基本工作原理

2.1 消息发送过程

消息的发送是基于 HTTP 请求，主要包含两种类型：一种是简单文本类型、一种是多媒体类型的消息。

1. 简单文本类型，是组装好参数后，直接通过 POST 请求发送到服务器；
2. 多媒体类型消息，在调用发送消息的接口之前，需要先将多媒体数据上传到 CDN 服务器，然后把返回的地址链接拼到发送消息的请求参数中，再请求发送消息接口，实现消息的发送；
3. 还有一些特殊的多媒体信息，比如第三方服务提供的大表情消息，在调用发送消息接口之前，就需要把第三方获数据另保存一份到自己的 CDN 服务器，然后把返回的数据拼接到发送消息参数中，请求发送消息接口，实现消息的发送。
   

2.2 消息接收过程

消息的接收是基于 WebSocket 长连接和 HTTP 请求相互配合来实现的。WebSocket 是 App 内用于服务端向客户端发送通知消息的单向通讯服务工具

1. 有了新的消息，服务端会通过 WebSocket 向接收方主动发送通知消息；
2. 做为主动通知的补充，客户端端上还有轮询任务，以固定时间间隔来通过 HTTP 请求服务端询问是否有新的消息；
3. 客户端收到通知消息之后，再通过 HTTP 请求新消息数据，来展示到对应的 UI；
   

2.3 消息的存储

消息的存储底层采用 sqlite 和第三方 FMDB 开源框架，再此基础之上开发了一套支持 ORM 以及 SQL 语句生成工具的基础库。每个支持数据库保存的 Model 类内部保存了具体表名、不同字段与表字段的映射，进行数据库操作的时候可以根据这些信息生成对应的 SQL 语句来保存到本地数据库。本地消息的保存就是直接通过框架保存到数据库即可，网络部分是请求到数据后，通过前后端约定的 envelop key 确定到具体数据 Model 的类，从而根据 ORM 信息来保存到数据库，大概就介绍到这里吧，不再做过多的介绍了。

三、应用场景以及设计目标

重构目标主要是为了减少因产品需求增加而带来维护成本的急剧上升。软件的设计不仅需要遵守软件SOLID 原则，还要结合实际的应用场景，下面会介绍项目中聊天部分的应用场景，以及对应的设计目标。

3.1 应用场景

当前 App 随着产品迭代，聊天的场景逐渐增多。最早只有单聊的场景，到后来新增了群聊，后来较短的时间内又多出了几种类型的临时聊天场景，后来两个月内又新增一种新的群聊场景，并且需要支持主题配置。

这些不同的聊天场景之间，消息发送、接收等逻辑一致，列表中相同类型的消息样式相同。但是，不同业务场景所支持的消息类型、主题样式、业务功能均有不同。

比如，某些聊天场景中根据不同的业务逻辑，发送消息达到一定数量后，就需要本地插入某种特殊类型的提示消息；而其他的业务可能会有在列表的头部展示某种特定样式的卡片；还有一些聊天详情在某些时间没有人发言则需要关闭聊天，并变更 UI。

3.2 设计目标

当前已有的设计起源与单聊，所支持的可扩展方向是支持新增各种消息卡片以及样式，但是对于新增聊天场景难以支持，比如后续的群聊是在单聊的基础上拷贝了大量代码，其通用的部分基本上是复制了一份份代码。随着新的聊天场景越来越多，会存在大量的冗余代码，维护成本几乎指数级别的上升。

所以，这次我们就需要把多种聊天的基础部分抽取出来，来供各种不同的聊条场景来使用。其中聊天列表和聊天通用逻辑，可以方便的迁移到不同的聊天业务场景，使消息列表部分以及发送逻辑与具体业务逻辑进行解耦，实现接入方只关注自身的业务逻辑，不需要关注聊天系统内部通用逻辑。

四、系统设计

4.1 整体架构设计图

4.2 模块划分

系统中子模块主要包括四个部分，分别是基础消息列表子模块（CoreMessageList）、聊天消息管理工具（ChatContext）、键盘输入模块（ChatKeyboard），下面做分别介绍在聊天模块中扮演的职责，及其与其他模块的关系，下面做详细介绍：

4.2.1 基础消息列表子模块（CoreMessageList）

该模块主要提供消息 UI 的展示、支持配置自定义 UI 样式以及事件回调。该模块依赖于聊天消息管理工具（ChatContext），ChatContext 会通过回调通知 CoreMessageList 渲染页面，与其他模块没有直接关联。

1. 对于易用性方面的设计：

2. 对于基础功能拓展性方面的设计

3. 易于维护性方面的设计

4. 代理回调方面的设计

4.2.2 聊天消息管理工具（ChatContext）

该负责维护管理消息发送、接收、撤回、删除等等操作，以及消息数据维护，数据变更的事件回调，CoreMessageList 部分会根据该数据变更来驱动列表的 UI 变更。给 ChatKeyboard 模块提供发送接口，给 CoreMessageList 内部的功能菜单提供撤回、删除、重试等功能提供对应的功能接口。

该模块主要分为四个子模块，消息数据检查模块、消息发送模块、消息接收模块、数据管理模块。其中消息发送和接收部分，根据文中前半部分介绍的基本工作原理进行设计开发。数据管理模块，可以根据消息数据变更的特性对算法进行针对性优化，该数据模块与消息 UI 列表中的 Item 数据模型算法保持一致：

1. ChatContext 具有以下这几个特点

2. 数据管理模块部分分析以及算法优化

针对消息数据的顺序确定性，以及增量新消息数量一般数量比较少等特性。
需要提供的功能主要有添加新的消息、加载历史消息、删除和更新。
在添加新消息前，数据要提前排序，拼接到数据列表中时采用如下图的方式：

4.2.3 键盘输入模块（ChatKeyboard）

负责输入框、键盘以及内部表情菜单等 UI 元素，维护通用功能的管理和配置功能，提供用户事件以及键盘 UI 变动的回调，可支持主题配置。提供 UI 更新事件回调给 CoreMessageList 用以修改消息列表底部的空间、滚动到底部等。点击发送按钮、选择完图片、视频、表情后会调用 ChatContext 对应的发送消息接口。简述如下表：

4.3 模块详细介绍

对于详细介绍的部分，由于篇幅的原因，这里会详细介绍 CoreMessageList 模块部分，会通过 UML 类图、接口设计以及设计思路来进行详细介绍

4.3.1 CoreMessageList 架构设计 UML 类图

4.3.2 CoreMessageListViewController 消息列表视图控制器接口设计

设计思路：该部分暴露了消息列表视图控制器的对外功能，保持保持接口功能简捷易用

/// 聊天消息列表视图控制器协议
@protocol XXXCoreMessageListController <NSObject>
 
/// 列表事件代理
@property (nonatomic, weak) id<XXXCoreMessagesListDelegate> listDelegate;
/// 长按菜单代理
@property (nonatomic, weak) id<XXXCoreMessageCellMenuDelegate> cellMenuDelegate;
/// 埋点信息代理
@property (nonatomic, weak) id<XXXCoreMessageListTrackDelegate> trackDelegate;
 
/// 列表相关功能适配器
@property (nonatomic, readonly) id<XXXCoreMessageListAdaptor> listAdaptor;
 
/// 把列表视图控制的 View 添加到 container，并设置为 container 的子视图控制器
- (void)addViewToContainer:(UIViewController *)container;
 
@end
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

4.3.3 XXXCoreMessageCellMenuDelegate 接口设计

该代理接口主要是处理长按消息的菜单处理
设计思路：根据展示时机包含 shouldShow、willShow、didShow 三个方法，willShow 时可以设置或者添加自定义数据

/// 长按消息弹窗功能
@protocol XXXCoreMessageCellMenuDelegate <NSObject>
 
@optional
/// 长按对应消息气泡，是否尝试展示对应的菜单类型
/// 如果想要禁止某种类型，则 return NO
/// @param menuType 菜单类型
/// @param message 长按气泡对应的消息
- (BOOL)coreMessageList:(UIViewController <XXXCoreMessageListController>*)coreMessageList
      shouldTryShowMenu:(XXXMessageActionType)menuType
                message:(XXXMessage *)message;
 
/// 将要弹窗消息菜单
/// 可根据业务需要添加自己的 Action，改变顺序等
/// @param actions 默认的 Action，可通过 type 区分类型
/// return 符合自己业务需求的 Action 数组
- (NSArray<XXXMessageAction *>*)coreMessageList:(UIViewController <XXXCoreMessageListController>*)coreMessageList
                         willShowActions:(NSArray<XXXMessageAction *>*)actions forMessage:(XXXMessage *)message;
 
/// 已经展示消息菜单
- (void)coreMessageList:(UIViewController <XXXCoreMessageListController>*)coreMessageList didShowedCellMenuWithActions:(NSArray<XXXMessageAction *>*)actions;
 
@end
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

4.3.4 XXXCoreMessagesListDelegate 接口设计

XXXCoreMessagesListDelegate 列表相关的总代理，主要包含三个子协议：

1. XXXCoreMessagesListCustomDataDelegate 接口设计，这个代理主要是负责业务传入自定义数据

/// 列表自定义数据数代理
@protocol XXXCoreMessagesListCustomDataDelegate <NSObject>
 
@optional
 
/// 消息列表顶部添加自定义的 CellModel
- (NSArray<XXXCoreMessageListBaseCellModel *> *)customPrependCellModelsForCoreMessageList:(UIViewController <XXXCoreMessageListController>*)coreMessageList;
 
/// 根据自己在列表顶部添加的自定义 CellModel，返回对应的卡片
/// @param cellModel 通过代理传入的自定义 CellModel
- (IGListSectionController *)coreMessageList:(UIViewController <XXXCoreMessageListController>*)coreMessageList
       sectionControllerForCustomPrependCellModel:(XXXCoreMessageListBaseCellModel *)cellModel;
 
/// 列表对于不支持的消息类型，允许业务方自定义文案，待定
- (NSString *)coreMessageList:(UIViewController <XXXCoreMessageListController>*)coreMessageList
             customTipsForUndefineMessage:(XXXMessage *)message;
 
/// 对于不同消息增加的自定义配置信息
- (XXXCoreMessageListCellConfig *)coreMessageList:(UIViewController <XXXCoreMessageListController>*)coreMessageList
                             cellConfigForMessage:(XXXMessage *)message;
 
@end
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

2. XXXCoreMessagesListCellDelegate 负责处理所有 cell 相关元素的事件，比如点击、长按头像或者内容；
   聚合一个提示类事件代理，封装提示模型，回调事件类型。比如点击「重新编辑」、「实名认证」等；点击富文本链接等事件回调；

/// Cell 相关事件代理
@protocol PUGCoreMessagesListCellDelegate <NSObject>
 
@optional
 
/// 点击头像，return NO 或者不实现默认跳转 profile 页
- (BOOL)coreMessageList:(UIViewController<XXXCoreMessageListController> *)coreMessageList
        tackleTapAvatar:(PUGUser *)avatarUser
                message:(PUGMessage *)message;
 
/// 长按头像
- (void)coreMessageList:(UIViewController<XXXCoreMessageListController> *)coreMessageList
     didLongPressAvatar:(XXXUser *)avatarUser
                message:(XXXMessage *)message;
 
/// 点击内容
- (void)coreMessageList:(UIViewController<XXXCoreMessageListController> *)coreMessageList didTapContentWithMessage:(XXXMessage *)message;
 
/// 点击富文本链接, 如果可以处理，return YES，否则 return NO
- (BOOL)coreMessageList:(UIViewController<XXXCoreMessageListController> *)coreMessageList
          handleTapLink:(NSString *)link
               messsage:(XXXMessage *)message;
 
/// 点击了提示消息事件
- (void)coreMessageList:(UIViewController<XXXCoreMessageListController> *)coreMessageList
        didTapTipAction:(XXXCoreMessageListCellModelTipAction)action
                message:(XXXMessage *)message;
@end
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

3. XXXCoreMessagesListScrolledDeletgate，主要负责列表滚动相关的代理事件，如果有需要滚动加速、减速之类的代理可以在此处添加

// 列表滚动事件代理
@protocol PUGCoreMessagesListScrolledDeletgate <NSObject>
 
@optional
 
/// 列表滚动
- (void)coreMessageList:(UIViewController<PUGCoreMessageListController> *)coreMessageList scrollViewWillBeginDragging:(nonnull UIScrollView *)scrollView;
 
- (void)coreMessageList:(UIViewController<PUGCoreMessageListController> *)coreMessageList scrollViewDidScroll:(nonnull UIScrollView *)scrollView;
 
@end

1
2
3
4
5
6
7
8
9
10
11
12

4. XXXCoreMessagesListDelegate 负责消息相关事件处理以及回调列表整体的代理事件，包括上述三个子代理

/// 消息列表相关功能代理事件
@protocol XXXCoreMessagesListDelegate <XXXCoreMessagesListScrolledDeletgate,
                                       XXXCoreMessagesListCustomDataDelegate,
                                       XXXCoreMessagesListCellDelegate>
 
@optional
 
/// 是否重试发送失败的消息
- (BOOL)coreMessageList:(UIViewController<XXXCoreMessageListController> *)coreMessageList shouldRetrySendMessage:(XXXMessage *)message;
 
/// 成功操作消息
- (void)coreMessageList:(UIViewController<XXXCoreMessageListController> *)coreMessageList
         successOperate:(XXXCoreMessagesListMessageOperate)operate
                message:(XXXMessage *)message
         responseObject:(id)responseObject;
 
/// 操作消息失败
- (void)coreMessageList:(UIViewController<XXXCoreMessageListController> *)coreMessageList
          failToOperate:(XXXCoreMessagesListMessageOperate)operate
                message:(XXXMessage *)message
                  error:(XXXError *)error;
 
/// 收到新的消息
- (void)coreMessageListDidReceivedNewMessages:(UIViewController <XXXCoreMessageListController>*)coreMessageList isFirstPage:(BOOL)isFirstPage;
 
/// 点击了消息列表页面
- (void)didTapCoreMessageListEmptyArea:(UIViewController<XXXCoreMessageListController> *)coreMessageList;
 
@end
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

五、总结

对于这个全新的设计方案，其基础功能目前还不能完全满足现有的业务，基础功能也需要继续完善，为了保证新设计方案不阻塞业务，会优先在新的聊天场景中使用新的聊天框架，在接入新聊天场景的过程中来逐步完善基础功能。后期如果对单聊或者老群聊有较大的改版时，也可以考虑直接接入新的框架去重新实现。
以上所述，是问目前从事的项目聊天模块架构的一个新的设计方案，希望能够给同行提供一定的思路，也希望能够得到大佬们的指导建议。最后祝愿同行的朋友能够身体健康、工作顺心。