作为小白接融云 IM SDK 新路体验~

Posted 融云RongCloud

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了作为小白接融云 IM SDK 新路体验~相关的知识,希望对你有一定的参考价值。

前提说明

应项目需求,实现即时通讯功能,业务场景相对单一,仅有单聊场景。选用的是融云的 IM SDK。

作为小白的初期心路历程

由于本人之前没有了解过即时通讯初期了解还是费了不少时间的。蓝瘦~

话不多说,请看操作

第一步:注册

首先要在融云的开发者后台注册拿到相应的信息。

由于初期了解,自己注册了一个开发者账号,没有用公司的,自己搞了个 appkey 和测试的 token,想着先弄个出样子。账号的注册参考的文档的快速集成中的 前提条件。 参考地址: https://docs.rongcloud.cn/v4/views/im/noui/guide/quick/premise/ios.html

后续这个服务端会给我们提供连接用的 token。这里先不做过多介绍。

第二步:看文档

由于之前对即时通讯业务的盲区,其实最开始公司给出的一对一聊天室有些无从下手的。接下来是漫无目的的逛文档。文档目录还是很对我口味的,个人感觉还不错,在不经意间发现了个切换文档布局的小功能个人比较喜欢。如果场景不清楚就用场景的文档,清楚了可以切换成平台的,很方便很清晰。~(。≧3≦)ノ⌒☆

我主要是通过看单聊的文档还有切换成平台模式的 web 端文档实现的集成。

附上文档地址:https://docs.rongcloud.cn/v4/views/im/noui/guide/quick/include/web.html

第三步:先弄个简单的示例

示例我参考了快速集成。SDK 使用的是 web 3.x 的 SDK

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="http://cdn.ronghub.com/RongIMLib-3.0.5-dev.js"></script>
</head>

<body>
<input id=\'messageValue\' type="text/">
<button onclick="sendMessage()">发送</button>
<button onclick="getMessageList()">获取历史消息</button>

</body>
<script>
var appkey = \'XXX\';
var token = \'XXXX\';
var im;
var conversationList = [];

function init() {
im = RongIMLib.init({ appkey: appkey });
im.watch({
conversation: function (event) {
var updatedConversationList = event.updatedConversationList;
console.log(\'更新会话汇总:\', updatedConversationList);
console.log(\'最新会话列表:\', im.Conversation.merge({
conversationList,
updatedConversationList
}));
},
message: function (event) {
var message = event.message;
console.log(\'收到新消息:\', message);
},
status: function (event) {
var status = event.status;
console.log(\'连接状态码:\', status);
}
});
}
function connect() {
var user = { token: token };
im.connect(user).then(function (user) {
console.log(\'链接成功, 链接用户 id 为: \', user.id);
}).catch(function (error) {
console.log(\'链接失败: \', error.code, error.msg);
});
}
function sendMessage() {
var inputText = document.getElementById(\'messageValue\').value;

var conversation = im.Conversation.get({
targetId: \'user1\',
type: RongIMLib.CONVERSATION_TYPE.PRIVATE
});
conversation.send({
messageType: RongIMLib.MESSAGE_TYPE.TEXT,
content: {
content: inputText
}
}).then(function (message) {
console.log(\'发送文字消息成功\', message);
});
}
function getMessageList() {
var conversation = im.Conversation.get({
targetId: \'user1\',
type: RongIMLib.CONVERSATION_TYPE.PRIVATE
});
var option = {
timestrap: +new Date(),
count: 20
};
conversation.getMessages(option).then(function (result) {
var list = result.list;
var hasMore = result.hasMore;
console.log(\'获取历史消息成功\', list, hasMore);
});
}

init();
connect();
</script>

</html>

根据文档一步一步操作,都很顺利。体感不错。

额。。。请忽略我没有写 UI,只有个输入框和发消息按钮。此处也想给融云提个小建议,要是有 UI 组件或者含 UI 的 SDK那就更完美了。

遇到的坑

由于看文档时没有注意到获取历史消息需要先开通服务。导致自己消息发送成功再去获取历史消息有问题,自己研究获取历史消息的方法研究了半天。

融云官网:https://www.rongcloud.cn/

以上是关于作为小白接融云 IM SDK 新路体验~的主要内容,如果未能解决你的问题,请参考以下文章

融云im小程序集成初体验

3分钟融云Demo体验:IM即时通讯篇

融云 IM SDK 发送语音消息

融云参加RTC实时互联网大会 现场集成IM SDK

融云参加RTC实时互联网大会 现场集成IM SDK

融云IM SDK web 端集成 — 表情采坑篇