即时通讯(融云单聊的集成)和客服

开篇

最近项目上架有了点时间,所幸就多写写文章分享下吧,今天就简单写一下集成融云怎么做单聊和集成客服这两个吧。

融云单聊的集成

先大体的说一下这篇文章的主要内容如下图,显示一个聊天的消息列表,显示所有的单聊信息。右上角的按钮,点击实现一个简单的单聊,点击跳转到具体的页面。左侧的客服是点击跳转到客服页面如下图。


即时通讯(融云单聊的集成)和客服_第1张图片
![Uploading 1317BF17-4E98-4261-A958-A275AA58C4AC_342568.png . . .]

下图是单聊界面发送数据的截图,融云还是比较好用的,很多东西都做好了,包括表情和图片发送什么的,这次项目只是做了单聊,这里主要说一下单聊。


即时通讯(融云单聊的集成)和客服_第2张图片
1317BF17-4E98-4261-A958-A275AA58C4AC.png

下图是客服点击页面,软件可以设计单独的客服功能,现在用的是免费功能,所以只有笨笨的机器人完全不知道我在说啥,融云的免费客服这里选择是,智齿客服,按照官方文档接入很简单就可以出现客服界面,客服的简单使用感觉就在智齿的控制台上,我们可以在线回答问题,和设置自动回复等。
即时通讯(融云单聊的集成)和客服_第3张图片
D7022448-03F9-4F0A-8522-5AB8831AD95E.png

单聊中设置的方法

下列方法都是在已经去网站上申请appkey和利用融云的API调试工具得到我们需要的token然后在appdelegate里注册以后进行的,因为首先我们要登录和融云服务器做数据关联,才能实现以下一些列操作。至于怎么使用API调试工具大家可以参照调试介绍,还是比较有用的,起码在测试阶段 。

新建一个简单的聊天页面
即时通讯(融云单聊的集成)和客服_第4张图片
9197D5EA-81DD-48A1-BEC4-83C677E3D884.png

如上图所示创建一个按钮,并放到导航栏右侧,点击push新的一页去显示一个新的聊天界面。在点击事件中我们创建一个聊天界面,并设置他的ID和Type和名称,就可以创建一个简单的聊天页面。


即时通讯(融云单聊的集成)和客服_第5张图片
单聊1.png

RCConversationViewController 为聊天界面视图控制器类,继承与 UICollectionViewController,您可以直接使用,也可以继承修改定制。
聊天界面中的 Cell 为 RCMessageBaseCell,Model 为 RCMessageModel,数据的来源为本地存储的消息实体(RCMessage)。

创建一个聊天列表

我们可以更改id在用自己的id去创建多个聊天,同时也可以用融云服务器的API调试工具给自己发送消息,测试是否收到。那么我们创建了多个聊天页面,当我们返回收我们又要怎么看到他们呢,因此这里我们就需要一个聊天列表,如本文的第一张图所示。
首先我们创建一个继承于RCConversationListViewController属性的列表,这里起名为FriendsController。我们可以在这个列表里做一下我们想要的操作。
RCConversationListViewController 为会话列表视图控制器类,继承与 UITableViewController ,您可以直接使用,也可以继承修改定制。
会话列表中的 Cell 为 RCConversationBaseCell ,Model 为 RCConversationModel ,数据的来源为本地存储的会话(RCConversation)数据。


即时通讯(融云单聊的集成)和客服_第6张图片
初始化.png

为了方便我们再创建一个聊天页面命名为:ChatViewController继承与RCConversationViewController。这样我们就可以在列表页面的点击cell回调的方法里去设置他的id和属性,实现点击回调。我们创建的一个个会话也就都显示在了聊天列表里。

聊天页面背景的显示设置
即时通讯(融云单聊的集成)和客服_第7张图片
BCB109C7-013C-41DE-B099-6B3B5A29BF04.png

在平时的聊天中我们使用我们自己喜欢的背景来代替丑陋的默认图片的事已经再平常不过了。如上图所示(图片太小了,默认填充)。设置的方法。我们在上一步创建的ChatViewController直接设置他的背景为透明,对设置透明这很重要然后在设置。算了上代码:


即时通讯(融云单聊的集成)和客服_第8张图片
ChatViewController_m.png

如果我们只是想改变颜色的话,用第一句就够了。

聊天字体的设置

好了在上面的方法中我们设置了聊天的背景,那么我还想改变字体的颜色怎么办呢(要求好多...)办法还是有的,我们还是在ChatViewController页面中进行设置,在显示会话的内容的cell即将显示的时候进行设置。我们把字体设置为红色,这样我们聊天的颜色就改变了。不建议改变字体大小等太大的变化,融云说了可能会影响布局,哈哈。


即时通讯(融云单聊的集成)和客服_第9张图片
ChatViewController_m.png
设置头像和昵称显示
即时通讯(融云单聊的集成)和客服_第10张图片
83FB2434-F856-439F-917B-5A8AF69ACA19.png

系统默认的东西都好丑,我们要设置自己的头像和显示昵称,下面就要动手了。
我们注册融云之后,在appdelegate中遵循RCIMUserInfoDataSource代理,并进行设置,之后我们就可以调取方法得到用户数据去修改用户头像和昵称了。


即时通讯(融云单聊的集成)和客服_第11张图片
AppDelegate_m.png

通过以上设置,就会发现头像和昵称已经改变,明显宾得不同了,我们的目的也就达到了。

后记

融云确实在开发的过程中替我们省了不少心,我这里简单介绍了一下单聊的一些简单设置吧,至于聚合显示,创建群组等待,等待我们去集成的还得一步步来。有写的不对的地方,希望大家积极指出。

你可能感兴趣的:(即时通讯(融云单聊的集成)和客服)