集成引导

1.准备工作

架构说明: http://www.rongcloud.cn/docs/quick_start.html#framework

应用服务器必须要处理的有:

1.维护用户信息，群组信息，好友关系，并提供对应接口供集成使用
2.获取并存储 token
3.系统消息，通知等

搭建应用服务器: https://github.com/sealtalk/sealtalk-server
开发文档 http://www.rongcloud.cn/docs/server.html

2.自行设计并 UI 界面

集成的思路:

1.根据功能选择 SDK 里对应的 API
2.应用服务器提供其他 API 之外所有的数据和功能支持
3.合并两部分数据，通过模板渲染呈现（为了实时响应数据变化，建议使用双向绑定）
4.注册对应的事件，包括 API 的方法（比如发送消息等）或者自行实现的业务方法（注册登录等）

SDK API调用示例：https://rongcloud.github.io/websdk-demo/api-test.html

3.引入 SDK，并完成初始化、链接云端

文档: http://www.rongcloud.cn/docs/web.html
参考: https://rongcloud.github.io/websdk-demo/connect-check.html

常见问题:

4.登录的实现

可以根据业务需要设计用户名和密码规则，具体的流程:

1.应用服务器处理用户的注册及校验，注册成功后，通过应用服务器访问融云服务器获取用户 token 并存储在应用服务器
2.用户成功登录后，通过应用服务器返回 token
3.端上用户使用 token 链接融云服务器
4.用户的在线状态

获取 token 文档: http://www.rongcloud.cn/docs/server.html#user_get_token
使用 token 链接融云服务器文档: http://www.rongcloud.cn/docs/web.html#connect
登录 demo

常见问题:

如何实现游客无需注册登录聊天？

5.好友关系，群组

在应用服务器维护数据，并同步至融云:

1.添加好友
2.创建并加入群组
3.禁言及黑名单
4.无用户身份处理

开发文档: http://www.rongcloud.cn/docs/server.html

应用服务器 node 版代码: https://github.com/sealtalk/sealtalk-server

接口文档

常见问题:

用户与消息通过 id 关联，userId == message.senderUserId

6.会话列表的实现

文档: http://www.rongcloud.cn/docs/web.html#conversation （请注意一定要开启单群聊消息云端存储功能收费详情）
参考: conversation-list.html

会话列表的数据分两部分，
一部分是会话列表（包含最后一条消息），SDK 提供了 getConversationList 方法获取数据；
另外一部分是会话对象（联系人，群等）的基本信息，需要应用服务器提供接口

1.用户登录成功后，获取 appKey，token，链接云端

模拟的用户及群组信息数据 : conversation-list.json 中的 "userInfos,groupInfos"

调用 init() 初始化，链接云端

var userInfo = {
	appKey: "",
	token: ""
};
var callbacks = {
	CONNECTED: function (instance) {
	},
	Success: function (id) {
	},
	Received: function (message) {
	}
};
init(userInfo, callbacks);

2.获取会话列表，处理会话列表（拼接应用服务器提供的用户或群组信息），渲染会话列表

模拟的会话列表数据 : conversation-list.json 中的 "conversation"

拼接后会话列表数据 : conversation-list.json 中的 "translate-conversation"

//同步会话列表
//@param  {ResultCallback} callback 返回值，参数回调
//@param {array} conversationTypes 可选参数，可以获取指定会话类型的会话，默认请传 null
instance.getConversationList({
	onSuccess: function (conversations) {
		//处理会话列表
		transConversations(conversations, function (translatedConversations) {
			//处理完成后，渲染会话列表
			renderConversationView(translatedConversations,instance);
		})
	}
}, null);

3.删除指定会话/清除会话列表

instance.removeConversation(conversationType,targetId,{
	onSuccess:function(bool){
		//删除会话成功。
		console.log(bool);
	},
	onError:function(error){
		// error => 删除会话的错误码
		console.log(error);
	}
});

4.新消息接受

参考消息接受，消息都是统一接受的，需要开发者根据消息的conversationType和targetId来判断消息属于哪个会话并在对应会话中更新

在接受新消息后重新计算未读消息数，并根据用户操作清除未读数，最后再同步状态到多端。具体实现请参考：消息状态及处理方式

常见问题:

7.聊天窗口的实现

聊天窗口由两部分组成，历史消息的列表以及发送消息的窗口，SDK 提供了两个对应的方法，getHistroyMessage，sendMessage，消息旁的用户信息与会话列表处理方式一致

获取历史消息文档: http://www.rongcloud.cn/docs/web.html#history_message

发送消息文档: http://www.rongcloud.cn/docs/web_api_demo.html#message_send

集成 demo : chat.html

1.历史消息列表

模拟的历史消息数据: chat.json 中的 "historyMessage"

/*
 * getHistoryMessages 拉取本地历史消息记录，如果本地没有历史消息，会自动从融云服务器拉去历史消息。
 * @param  {ConversationType}          conversationType 会话类型
 * @param  {string}                    targetId         用户 Id
 * @param  {number|null}               pullMessageTime  拉取历史消息起始位置(格式为毫秒数)，可以为 null
 * @param  {number}                    count            历史消息数量
 * @param  {ResultCallback} callback         回调函数
 */
instance.getHistoryMessages(conversationType, targetId, null, 20, {
	onSuccess: function (list, hasMsg) {
		// list 为拉取到的历史消息列表
		// hasMsg 为 boolean 值，如果为 true 则表示还有剩余历史消息可拉取，为 false 的话表示没有剩余历史消息可供拉取。
		// renderHistoryMessages 为自定义的渲染页面方法
		renderHistoryMessages(list, hasMsg, instance);
	}
});

2.发送消息窗口

/*
 * sendMessage 发送消息。
 * @param  {ConversationType}        conversationType 会话类型
 * @param  {string}                  targetId         目标 Id
 * @param  {MessageContent}          messageContent   消息类型
 * @param  {SendMessageCallback}     sendCallback
 * @param  {ResultCallback} resultCallback   返回值，函数回调
 */
instance.sendMessage(conversationType, targetId, msg, {
		// 发送消息成功
		onSuccess: function (message) {
		}
	}
);

8.发送消息的功能增强

图片消息，文件消息，自定义消息

消息接口文档: http://www.rongcloud.cn/docs/web_api_demo.html#message

集成 demo: message.html

1.图片消息

模拟接收图片消息的数据: message.json 中的 "messageType" 为 "ImageMessage"

模拟发送服务器图片: 开发者站点 => API 调试 => 发送单聊消息 => "objectName" == "RC:ImgMsg"

1.上传图片,

上传插件文档: http://www.rongcloud.cn/docs/web.html#upload_widget

图片上传插件以七牛云为例，依次引入 qiniu.js，upload.js，uploadInit.js，为上传按钮添加监听事件，message.js 中 watchUpload 方法

2.上传图片后，生成图片消息 createMessage

3.调用 sendMessage 发送图片消息

instance.sendMessage(conversationType, targetId, msg, {
		onSuccess: function (message) {
			console.log("Send successfully");
		}
	}
);

2.文件消息

模拟接收文件消息的数据 : message.json 中的 "messageType" 为 "FileMessage"

实现方法同图片消息

3.自定义消息

1.定义消息类型

var messageName = "PersonMessage"; // 消息名称。
var objectName = "s:person"; // 消息内置名称，请按照此格式命名。
var mesasgeTag = new RongIMLib.MessageTag(true,true);// 消息是否保存是否计数，true true 保存且计数，false false 不保存不计数。
var propertys = ["name","age"]; // 消息类中的属性名。
RongIMClient.registerMessageType(messageName,objectName,mesasgeTag,propertys);

2.发送消息

var conversationType = RongIMLib.ConversationType.PRIVATE; //私聊,其他会话选择相应的消息类型即可。
var msg = new RongIMClient.RegisterMessage.PersonMessage({name:"zhang",age:12});
instance.sendMessage(conversationType,targetId, msg, {
    onSuccess: function (message) {
    }
});

3.接收消息

接收消息与其他内置消息一致，在上文中提到的 setOnReceiveMessageListener 中 onReceived 获取

常见问题:

emoji 的发送、接收、解码与显示处理逻辑

9.公众号

1.准备工作

公众号创建流程:

1.在公众号系统: http://public.rongcloud.cn 创建公众号并更新发布
2.登录开发者管理后台 https://developer.rongcloud.cn 通过 “公众服务平台 => 添加私有公众号”给 app 添加公众号,添加私有公众号需要应用申请上线，上线后页面右上角出现添加私有公众号按钮（公众号为填写公众平台 => 公众号设置 => 公众号，公众号识别码为公众平台 => APP 接入模式设置 => 私有模式 => 当前识别码）
3.用户可以在第二步的添加结果里进行搜索和关注操作，关注后可以通过消息监听接受公众号的推送，用户也可以给公众号留言，具体细节参考页面里的示例代码和注释。

调试 demo: https://rongcloud.github.io/websdk-demo/api-test.html

集成 demo: public.html

2. 集成的思路

页面分配

0.公众号模板主页 public.html
1.公众号列表页 public-list.html
2.公众号搜索页 public-search.html
3.公众号详情页 public-info.html
4.公众号聊天页 public-chat.html
5.公众号推送文章页 public-article.html

3.引入SDK，并完成初始化、链接云端

初始化参考: init.js

var userInfo = {
	appKey: "",
	token: ""
};
var callbacks = {
	CONNECTED: function (instance) {
	},
	Success: function (id) {
	},
	Received: function (message) {
	}
};
init(userInfo, callbacks);

4.公众号列表页

html: public-list.html

js: public-list.js

公众号列表数据模型 public-mock-data.json 中的 "publicList"

变量解释:

conversationType : 7, 私有云里只有应用公众服务（MC） 8, 公有公众服务（MP）
hasFollowed : 是否关注
introduction : 功能描述
isGlobal : 是否全局
menu : 自定义菜单
name : 昵称
portraitUri : 头像 url
publicServiceId : 公众号 id

//获取已关注公众号
RongIMClient.getInstance().getPublicServiceList({
	onSuccess: function (list) {
		console.log("获取已关注公众号成功");
	}
});

5.公众号搜索页

html: public-search.html

js: public-search.js

公众号搜索数据模型 public-mock-data.json 中的 "searchList"

//根据用户输入关键字搜索未关注公众号
var keywords = this.stat.searchVal;
var searchType = 1; //[0-exact 1-fuzzy]
RongIMClient.getInstance().searchPublicService(searchType, keywords, {
	onSuccess: function (list) {
		//console.log("查找公众号成功");
		//list 为匹配到的所以结果
		//that.stat.searchList=list;
		var listUnFollowed = [];
		$(list).each(function () {
			this.hasFollowed == false && listUnFollowed.push(this);
		});
	}
});

6.公众号详情页

html: public-info.html

js: public-info.js

公众号详情数据模型 public-mock-data.json "searchList" 中的对象

//订阅公众号
var publicServiceType = RongIMLib.ConversationType.PUBLIC_SERVICE;
RongIMClient.getInstance().subscribePublicService(publicServiceType, publicServiceId, {
	onSuccess: function (list) {
		console.log("订阅公众号成功");
	}
});

//取消订阅公众号
RongIMClient.getInstance().unsubscribePublicService(publicServiceType, publicServiceId, {
	onSuccess: function (list) {
		console.log("取消订阅公众号成功");
	}
});

7.公众号聊天页

html: public-chat.html

js: public-chat.js

公众号回复用户消息在公众平台 => 用户回复

公众号聊天消息数据模型 public-mock-data.json "msgList" 中 "messageType" = "TextMessage" 为文本消息，"messageType" = "PublicServiceMultiRichContentMessage"为公众号推送多图文消息

变量解释:

messageDirection : 1, 发送消息方 2, 接收消息方
messageType : 消息类型
articles : 公众号推送图文
picurl : 文章预览图 url 地址
title : 文章标题
url : 文章地址

//发送消息
var text = this.stat.sendMsgVal ;
var msg = new RongIMLib.TextMessage({content: text, extra: "公众号"});
RongIMClient.getInstance().sendMessage(conversationtype, publicServiceId, msg, {
	onSuccess: function (message) {
		//发送成功后 渲染已发送消息
		that.stat.msgList.push(message);
	}
});

8.公众号推送文章页

html: public-article.html

js: public-article.js

公众号向用户推送文章在公众平台 => 消息推送

公众号推送文章地址为 public-mock-data.json "msgList" 中 "messageType" = "PublicServiceMultiRichContentMessage" 公众号推送多图文消息 articles.url

//文章内容嵌套在 iframe 中
<iframe :src="stat.articleUrl"></iframe>

常见问题:

公众号账号的维护添加

WebIM 集成引导

1.准备工作

2.自行设计并 UI 界面

3.引入 SDK，并完成初始化、链接云端

常见问题:

4.登录的实现

常见问题:

5.好友关系，群组

常见问题:

6.会话列表的实现

常见问题:

7.聊天窗口的实现

8.发送消息的功能增强

1.图片消息

2.文件消息

3.自定义消息

常见问题:

9.公众号

1.准备工作

2. 集成的思路

3.引入SDK，并完成初始化、链接云端

4.公众号列表页

5.公众号搜索页

6.公众号详情页

7.公众号聊天页

8.公众号推送文章页

常见问题: