草草们的忧伤：环信IM昵称和头像

最近天气转冷了，写篇文章，给大家暖暖心~



 
在环信草草群（群号：340452063）中，无论是安卓还是IOS或者WebIM，每天遇到最多的问题就是“如何显示昵称和头像”，鉴于大家的墙裂需求，所以我最近花了点时间研究了相关解决方案，希望能跟大家一起探索。
 
运行效果


 
目标
集成环信IM的SDK后，能以最快方式，最少代码管理用户的昵称和头像。
 
解决方案
使用本地缓存（sqlite）和后端云实现头像和昵称的二级缓存
【参考】 http://docs.easemob.com/im/490integrationcases/10nickname#昵称和头像的显示与更新
 
计划
先在IOS上验证该方案的优缺点，待方案完善后，再将此模式复制到Android和WebIM上

项目快速集成
1. 按照简版Demo的方式在项目中快速集成环信IM功能

IOS快速集成环信IM - 基于官方的Demo优化，5分钟集成环信IM功能http://www.imgeek.org/article/825307886

2. 注册第三方后端云账号，使用数据存储服务



(1). 在第三方后端注册用户，进入控制台，创建应用（例如名称为【环信简版Demo】）,点击【存储】按钮进入数据存储管理页面：


 
(2). 创建数据表UserWebInfo，并且按照新增三个字段（字段名开头必须小写）：

openId   String   环信ID

nickName  String  用户昵称

avatarUrl  String  用户头像（绝对路径）

 
其中，avatarUrl是app端上传头像到【_File】数据表后获取到的绝对路径：



(3). 在【设置】-> 【应用Key】页面中


复制AppID和AppKey替换AppDelagate里didFinishLaunchingWithOptions的key：

// 初始化web缓存配置
[UserWebManager config:launchOptions

                 appId:@"utUG5ot9Y64dqJIFG9Ir2rqu-gzGzoHsz"

                appKey:@"IbHhNkPo4gfrFFc3epCw3eG2"];

参考： 简版demo中的AppDelegate+EaseMob.m第56行
 
3. 上传用户头像和昵称到第三方后端云服务器

用户在app中调用开发者服务器API接口登录成功后，一般都会返回用户的属性信息（昵称和头像等），我们可以在这里上传用户信息到云服务器：

// 登录成功后，如果后端云没有缓存用户信息，则新增一个用户
[UserWebManager createUser:username nickName:nickName avatarUrl:avatarUrl];

参考：简版demo中LoginViewController.m的第156行代码
 
4.显示用户昵称和头像

在需要显示用户昵称和头像的地方，调用UserCacheManager里的方法即可，具体调用地方，请在xcode里搜索简版Demo代码“[UserCacheManager ”，如图所示，在这里就不累赘了：


 
5.修改用户昵称和头像
(1). 更改头像

// 上传头像到后端云
[UserWebManager updateCurrAvatar:orgImage completed:^(UIImage *imageData) {
[weakSelf hideHud];

    if(!imageData){
[self showHint:@"更新头像失败~"];

        return;

    }

[weakSelf.headImageView imageWithUsername:kCurrEaseUserId placeholderImage:imageData];
[self showHint:@"更新头像成功~"];

}];

参考简版Demo中UserProfileEditViewController.m第181行代码
 
(2). 更新昵称

[UserWebManager updateCurrNick:@"小草" completed:^(BOOL isSucc) {

    if (weakSelf) {

        UserProfileEditViewController *strongSelf = weakSelf;
[strongSelf hideHud];

        if (isSucc) {
[strongSelf.tableView reloadData];
[strongSelf showHint:@"修改成功~"];

        } else {
[strongSelf showHint:@"修改失败~" yOffset:0];

        }

    }

}];

参考简版Demo中UserProfileEditViewController.m第152行代码
 
6.二级缓存处理流程图



 
由于能力有限，此方案难免有不妥之处，欢迎大家拍砖。



环信互帮互助-非官方 340452063
 
Q&A

问：如何安装第三方后端云存储服务 SDK？

答：安装还是比较简单的，可以参考第三方的文档，有不明白的可以看下教程 

问：使用第三方云存储服务是否稳定、安全，比如不久他关闭了app会不会受影响？

答：云服务厂商一般不会关闭，退一万步来说，即使第三方后端云停止服务了也会提前通知，我们也可以将接口换成我们开发者自己服务器的api。类似的第三方云存储服务还有MaxLeap、bmob。