RainbowChat开发资料：客户端如何实现收到聊天消息到界面显示的？(针对iOS、Android)

1、前言

我注意到VIP群里有不少人对RainbowChat的客户端是如何实现从收到聊天消息、到消息是如何被刷新显示在界面上有疑问，所以就趁回答问题的机会整理成本贴，希望有助于对RainbowChat客户端代码理的理解。

2、UI和数据解偶实现原则

RainbowChat的iOS和Android客户端在数据和UI界面的解偶上，遵从一个严格的解偶原则：即数据全部由APP后台的数据模型进行管理（包括插、删、改等），绝不直接与UI进行直接偶合。说直白一点就是数据模型中绝对看不到一行操作UI的代码。

那这个解偶是如何实现的？

实现原理就是：一对一聊天数据全部由MessageProvider这个类来管理（与每个好友的一对一聊天数据都是一个个数组对象），数据模型只管数据的处理，而不用关心UI界面。但每个数组对象都有通知观察者的能力，即跟每个好友的聊天数据对应的数组中的数据改动（插入、删除、更新等）都会触发通知它的观察者。

也就是说，UI的刷新代码只需要在观察者中实现就好了，而且是需要的时候就设置（比如进入聊天界面时），不需要的时候就取消设置（比如从聊天界面中退出时），无论有无设置这个观察者都不会影响数据模型原本的工作逻辑，这就实现了数据跟UI的解偶。

下面将就RainbowChat的Andriod端和iOS端的代码实现进行进一步具体说明，更容易理解。

3、iOS端具体代码实现：聊天消息从收到到UI界面刷新的所有流程

写在前面：RainbowChat是基于MobileIMSDK框架实现的，而MobileIMSDK框架中的聊天消息是基于回调事件实现的，如果您觉得加上了全功能IM逻辑后的消息收到理解起来有点复杂，那你可以去看看MobileIMSDK的iOS开发者指南，从最简单的Demo理解起来可能更直接，但原理上没有任何变化（更多地是心理感受而已）。

而在RainbowChat中，实现聊天消息事件监听的回调代码都是在ChatTransDataEventImpl这个类里实现的（在Andriod是它是ChatTransDataEventListener.java，在iOS中它是ChatTransDataEventImpl.m）。

3.1IM底层会通知ChatTransDataEventImpl.m回调，告之收到聊天消息（以一对一聊天消息为例）

收到IM底层的通知——已收到一对一聊天消息（代码实现如下）：


补充说明：至于具体的IM底层是如何通知ChatTransDataEventImpl.m回调，请参见iOS开发者指南，RainbowChat中的IM核心层完全基于MobileIMSDK实现，开发者完全无需理会具体的即时通讯算法逻辑。

3.2ChatTransDataEventImpl.m收到的数据是如何put到MessageProvicer数据模型中的

代码如下图所示：

3.3再来看看MessageProvicer数据模型中的putMessage方法

MessageProvicer的putMessage方法实现逻辑是：先通过好友的uid拿到此好友的聊天数据存放数组，然后数组add进此条聊天消息即完成


一个关键问题：数组add进此条聊天消息时作了个额外通知观察者的动作，如下所示


如上图所示：APP在收到聊天消息后，把此条消息放入该好友的数组中时，会通知数据模型的观察者（如果设置了观察者的话）。换言之，APP中收到好友的聊天数据时一定会通知数据模型的观察者，而观察者就是数据模型留给UI层监听数据变动的关键！

3.4再来看看聊天界面中是怎么给MessageProvicer设置聊天数据变动观察者的

在需的时候设置（比如进入聊天界面时），不需要的时候就取消设置（比如从聊天界面中退出时）：


看看chattingDatasObserver这个观察者是干吗的？

（如上图代码所示：此观察者就是在收到聊天数据变动通知时，刷新聊天界面的消息列表UI的，仅此而已）

4、Android端具体代码实现：聊天消息从收到到UI界面刷新的所有流程

写在前面：RainbowChat是基于MobileIMSDK框架实现的，而MobileIMSDK框架中的聊天消息是基于回调事件实现的，如果您觉得加上了全功能IM逻辑后的消息收到理解起来有点复杂，那你可以去看看MobileIMSDK的Andriod开发者指南，从最简单的Demo理解起来可能更直接，但原理上没有任何变化（更多地是心理感受而已）。

4.1IM底层会通知ChatTransDataEventListener.java回调，告之收到聊天消息（以一对一聊天消息为例）

收到IM底层的通知——已收到一对一聊天消息（代码实现如下）：



补充说明：至于具体的IM底层是如何通知ChatTransDataEventListener.java回调，请参见Andriod开发者指南]，RainbowChat中的IM核心层完全基于MobileIMSDK实现，开发者完全无需理会具体的即时通讯算法逻辑。

4.2ChatTransDataEventListener.java收到的数据是如何put到MessageProvicer数据模型中的

代码如下图所示：

4.3再来看看MessageProvicer数据模型中的putMessage方法

MessageProvicer的putMessage方法实现逻辑是：先通过好友的uid拿到此好友的聊天数据存放数组，然后数组add进此条聊天消息即完成


一个关键问题：数组add进此条聊天消息时作了个额外通知观察者的动作，如下所示


如上图所示：APP在收到聊天消息后，把此条消息放入该好友的数组中时，会通知数据模型的观察者（如果设置了观察者的话）。换言之，APP中收到好友的聊天数据时一定会通知数据模型的观察者，而观察者就是数据模型留给UI层监听数据变动的关键！

4.4再来看看聊天界面中是怎么给MessageProvicer设置聊天数据变动观察者的

在需的时候设置（比如进入聊天界面时），不需要的时候就取消设置（比如从聊天界面中退出时）：


如上图代码所示：看看chattingDatasObserver这个观察者是干吗的？此观察者就是在收到聊天数据变动通知时，刷新聊天界面的消息列表UI的，仅此而已！

5、本文小结

说白了：RainbowChat的客户端显示一条聊天消息的流程就是：在收到IM底层的聊天消息通知后，把数据先放到数据模型中，由数据模型通知观察者来刷新UI界面。但观察者不是必须的，只在需的的时候设置就可以，从而实现数据跟UI的代码解偶。不知你是否能够理解？

另一个有趣的问题：你可能注意到RinbowChat的iOS和Andriod版同样的功能代码可能连类命名都是一样的，没错，不仅连类命名一样，很多时候连具体的代码实现都是一致的，除了Android是Java写的、iOS是OC写的以外，代码逻辑实现几乎是保持严格一致的，这有利于两端代码和逻辑保持完全同步，方便2次开发或学习研究。

以上是本次资料的全部内容，如您还有疑问请直接回贴，我们在帖子中讨论即可！