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

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

1.png

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

 
目标
集成环信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. 注册第三方后端云账号,使用数据存储服务

3.png

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

 
(2). 创建数据表UserWebInfo,并且按照新增三个字段(字段名开头必须小写):
openId   String   环信ID
nickName String 用户昵称
avatarUrl String 用户头像(绝对路径)
5.png

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

6.png

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

复制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 ”,如图所示,在这里就不累赘了:
8.png

 
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.二级缓存处理流程图

9.png

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

10.png

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

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

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

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

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

3 个评论

看完大表哥的文章,MM再也不用担心我不会弄环信昵称头像了。
楼主你这个用的是哪个第三方的云服务
直接移植大表哥的代码, 运行后,单聊就报这个错了,是不是 关于红包的什么东西 没配置啊, 求助大表哥

2017-11-09 14:41:37.570601+0800 HXLehandIM[5988:3078181] +[NSBundle RedpacketBundle]: unrecognized selector sent to class 0x1a88f63d0
2017-11-09 14:41:48.093947+0800 HXLehandIM[5988:3078181] *** Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: '+[NSBundle RedpacketBundle]: unrecognized selector sent to class 0x1a88f63d0'
*** First throw call stack:
(0x182606fe0 0x181068538 0x18260de34 0x18260af54 0x182506d4c 0x1002b10e0 0x1002b1038 0x1002a10a4 0x1001b37e0 0x188738b04 0x188750590 0x1888d4e18 0x1887ef7bc 0x1887ef424 0x1887ef388 0x188735cc0 0x185926274 0x18591ade8 0x18591aca8 0x18589634c 0x1858bd3ac 0x18872b308 0x1825b49a8 0x1825b2630 0x1825b2a7c 0x1824e2da4 0x183f4d074 0x18879dc9c 0x1001e173c 0x1814f159c)
libc++abi.dylib: terminating with uncaught exception of type NSException

要回复文章请先登录注册

知识价值的认可,源自您的赞赏

扫描二维码,你的支付将由imGeek代收后转给对方

×