通知设置 新通知
【社区精华|持续更新】收录本社区精华内容,手把手教学IM/RTC开发! 置顶
admin 发表了文章 • 8 个评论 • 720 次浏览 • 2020-12-07 14:41

本文收录了GeekOnline社区精华内容,希望帮助社区开发者学习IM+RTC知识,解答疑惑。赠人玫瑰,手有余香,如您有不错的内容需要收录,欢迎在在评论区投稿回复。
Android篇
解决融云 SDK 4.0 版本配置 https 导航报 SSLHandshakeException
融云即时通讯SDK集成 — 定制UI(一) ——会话界面小改动
融云即时通讯SDK集成 — 定制UI(二) ——添加自定义表情库
融云即时通讯SDK集成 — 定制UI(三) ——兼容Android Q
融云即时通讯SDK集成 — 国内厂商推送集成踩坑篇(Android平台)
融云 ConversationListFragment 会话列表添加头部布局
融云即时通讯SDK集成 — FCM推送集成指南(Android平台)
iOS篇
集成融云 IMLib 时,如何实现一套类似于 IMKit 的用户信息管理机制
干货分享——使用融云通讯能力库 IMLib 实现单群聊的阅读回执
Web篇
作为小白接融云 IM SDK 新路体验~
微信小程序集成融云 SDK (即时通讯) 集成必备条件
Web 端使用融云 SDK 集成实现滑动加载历史消息
融云IM SDK web 端集成 — 表情采坑篇
融云 Web SDK 如何实现表情的收发 ?
集成融云小程序 SDK 遇到的问题
使用融云 Web SDK 撤回消息
Web 端集成融云 SDK 如何发送正确图片消息给移动端展示?
融云 Web 播放声音 — Flash 篇 (播放 AMR、WAV)
融云 AMR(Aduio) 播放 AMR 格式 Base64 码音频
社区福利
【领取见面礼】限量 100份 GeekOnline加油包!等你来拿
【有奖调研】Geek Online 2020 编程挑战赛参赛调研
【征稿活动】Geek Online 社区第一期投稿激励计划已启动!
GeekOnline编程挑战赛
Geek Online 2020 编程挑战赛 GitHub 仓库
2 个月激烈角逐,15 支队伍突围决赛路演!Geek Online 2020 编程挑战赛完美收官!
一张图回顾 Geek Online 2020 编程挑战赛精彩瞬间!
“这些项目不是什么赚大钱的项目,但是它们足够有趣。”丨关于 Geek Online 2020 编程挑战赛,选手们如是说
融云 CTO 杨攀: Geek Online 2020 编程挑战赛 让开发者站上 C 位
【参赛攻略】你想了解的Geek Online 2020 编程挑战赛常见问题这里都有!
【融云集成常见问题整理】Geek Online 2020 编程挑战赛选手提问整理
求职招聘
持续更新....
融云im小程序集成初体验
大神庵 发表了文章 • 0 个评论 • 30 次浏览 • 6 天前

最近领导让做一个小程序端的聊天功能,基于多方考虑,最终选择了融云的im来实现,那就先写个demo体验下吧。
首先呢,当然是查看官方文档,文档地址如下: https://docs.rongcloud.cn/v4/views/im/noui/guide/private/setting/include/mini.html
需要注意要在管理后台的小程序服务下将小程序的开关打开,否则会报错,相关的demo也可从后端下载到。
拿到sdk了,我们就可以上手集成了,嘻嘻……
由于是demo,暂时先把appkey和token配置写死了,放在了config.js中,appkey和token可以从管理后台获取到。
其次呢,我们需要把im引入,可以整一个公用的js文件,在此引入im sdk,初始化一个全局的im对象(在此呢需要注意im对象一定是全局的,不能赋值给小程序里面的data值,之前我就犯了错,赋值给了data,导致页面只要一调用setData方法就一直报Converting string to Json的错误,大家可以在集成过程中避雷呢)。
引入代码如下:
const RongIMLib = require("./RongIMLib-3.0.7-dev.js");
const config = require("../public/config");
const imInstance = RongIMLib.init({ appkey: config.appkey});
export {
RongIMLib,
config,
imInstance
}
接着我们创建一个主页面,在这个页面中我们可以建立融云的连接以及获取会话列表。
connect() {
if (this.data.isConnect) {
this.data.im.disconnect();
}
imInstance.connect({ token: config.token }).then(user => {
this.isConnect = true;
this.getConversationList();
console.log('链接成功, 链接用户 id 为: ', user);
}).catch(error => {
console.log('链接失败: ', error);
});
},
注意事项:在此需要注意安全域名问题,要不会报错,导致连接不上融云的服务。
1. 开发环境的话,可以在右上角的详情中的本地设置中将不校验合法域名的地方打上对勾。
2. 生产环境的话,可以参考如下地址设置: https://docs.rongcloud.cn/v4/views/im/noui/guide/private/setting/include/mini.html
这样的话就可以连接成功了,哈哈,第一步总算是跨出去了。
接下来我们可以在连接成功后获取会话列表,代码如下:
imInstance.Conversation.getList().then(list => {
this.setData({
conversationList: list
})
}).catch(error => {
console.log('获取会话列表失败: ', error);
});
点击详情跳转到聊天页面,在此需要注意如果要获取历史记录的话是要开通im商业版-单群聊云存储的。开通后按照api使用说明获取就可以了,代码如下:
getHistory(conversation) {
const option = {
timestrap: +new Date(),
count: 10
};
conversation.getMessages(option).then((result) => {
var hasMore = result.hasMore; // 是否还有历史消息可以获取
this.setData({
messageList: result.list
})
});
}
接下来发送消息等其他接口,正常调用就可以了,和web端sdk基本是一致的,参考官方文档即可,整个集成过程花了两三天吧,还算顺利。有不足之处还望大家多多指教,多多交流……
融云官网地址:https://www.rongcloud.cn/
融云开发文档地址:https://docs.rongcloud.cn/v4/
集成融云即时通讯碰到的一些问题
赵炳东 发表了文章 • 0 个评论 • 19 次浏览 • 6 天前

前言
公司产品需要新增即时通讯的模块,经过调研后使用融云的即时通讯 SDK 由于以前没有做过相关聊天类的项目,在开发的时候碰到了很多坑,下面会将碰到的问题和解决方案记录下来以做备份和学习交流
融云官网:https://www.rongcloud.cn/ 开发文档:https://docs.rongcloud.cn/v4/
问题列表
1、如何获取历史消息
解决方案: 因为 Web 端没有本地存储,不提供本地获取方法,只能从远端获取 使用获取历史消息方法需要在开发者后台开启 IM 商用版 - 单群聊云存储 服务,服务开通后 30 分钟左右生效 每次最多只能获取 20 条历史消息,通过改变参数 timestrap 来获取其他时间段的历史消息
2、删除会话后还有会话
解决方案: 1、删除会话. 正常来说只要没有收发消息, 会话就不会再生成了 2、如果您有清除 localStorage 的操作, 则 SDK 内部会重新拉取离线消息. 而会话列表是根据收发消息生成的. 则会再次产生会话. 所以建议您检查下是否有清除 localStorage 的操作. 如果有, 建议您只清除自己业务相关的 key 3、如果您换端登录, 则会再次收离线消息, 如果希望此时依然不显示删除的消息. 可以在您删除消息后发一条自定义消息比如: (1). 删除会话 A (2). 发送自定义消息, 标识删除了会话 A (3). 换端登录, 重复收之前已收到过的消息 (4). 收消息时收到了步骤 (2) 中发送的删除标识消息, 根据此自定义消息, 再次调用删除会话方法删除会话
3、怎样才能获取到加入群组之前的聊天记录
解决方案: 加入群组,融云默认是获取不到之前的历史消息,如果想获取到之前的历史消息,需要在开发者后台 -- 免费基础功能 中开通 “新用户获取加入群组前历史消息” 服务,服务开通后 30 分钟左右生效
4、消息中的接收方和发送方 ID 为什么是相同的
解决方案: 如果在接收方来查看消息的话,接收方 id 和 发送方 id 是相同的。 消息体中 targetId 表示会话 id (接收方),senderUserId 表示发送方 id ,messageDirection 表示消息方向,发送: 1,接收: 2 如果 A 给 B 发送一条消息,那么在 B 的角度看的话 targetId 为 A,senderUserId 也是 A,只是 messageDirection 为 2 表示接收 在 A 的角度看的话, targetId 为 B,senderUserId 是 A,只是 messageDirection 为 1 表示发送
5、删除历史消息时,参数与文档描述一致,但是结果却返回 33007 表示:未开通历史消息服务,但是开发者后台早已经开通了
解决方案: 因传入了比融云服务器时间还要大的时间, 所以服务返回了此错误码. 如果要保证删除成功, 建议传入会话最后一条消息的 sentTime (发送时间)
6、接收 emoji 显示不出来
解决方案: 1、Web SDK 接收消息后,消息体内的原生 Emoji 字符会被解码为对应 Unicode 码,需调用转化方法才能正确显示 2、不同浏览器, 不同设备, 展示的原生 Emoji 表情都不同 3、如需多端展示 Emoji 一致, 需使用 emojiToHTML 转化为 HTML 后再展示(此方法为以图片形式展示) 4、emojiToHTML 和 symbolToHTML 仅支持默认的 128 个 emoji. 展示更多, 需自行扩展 详情参考:https://docs.rongcloud.cn/v4/views/im/noui/guide/private/msgmanage/msgsend/web.html#emoji
暂时先记录这些,后续还有的话会继续添加进去,也欢迎大家进行补充,一起学习一下,笔芯 ♥️ ♥️ ♥️ !!!
融云发送文件和图片消息
赵炳东 发表了文章 • 0 个评论 • 22 次浏览 • 6 天前

前段时间集成了web端融云的聊天功能,但是只能发送普通消息,最近产品经理出了新需求,需要把文件发送和图片发送加上,那就撸起袖子走一遍。
官方文档说明地址如下: https://docs.rongcloud.cn/v4/views/im/noui/guide/group/msgmanage/msgsend/web.html
看过文档之后,才发现发送文件和图片消息是分两步的,首先要实现文件和图片的上传,然后拿到数据后发送消息。融云默认是存储到七牛服务器的,其实也可以上传到自己的服务器,由于是个demo,我暂时就存储到七牛啦。
文件和图片上传
demo地址:https://github.com/rongcloud/rongcloud-web-im-upload,用到的文件可以从以上demo地址中拿到。
上传暂时还不支持npm的引如方式,需要在html中引入上截图中的三个文件,顺序如下:
<script src = "./send-data.js"></script>
<script src = "../upload.js"></script>
<script src="./init.js"></script>
然后在input的change事件中,触发以下方法:
fileChange(evt, type) {
this.currentType = type === 'img' ? RongIMLib.FileType.IMAGE : RongIMLib.FileType.FILE;
const file = evt.target.files[0];
console.log('file', file);
if (type === 'img') {
UploadClient.initImage(this.config, (uploadFile) => { // 上传文件为: UploadClient.initFile
uploadFile.upload(file, this.uploadCallbacks);
});
} else {
UploadClient.initFile(this.config, (uploadFile) => {
uploadFile.upload(file, this.uploadCallbacks);
});
}
},
config配置如下:
config() {
return {
domain: 'http://upload.qiniu.com',
fileType: this.currentType,
getToken: (callback) => {
this.rongIMClient.getFileToken(this.currentType , {
onSuccess: (data) => {
callback(data.token);
},
onError: () => {
console.error('get file token error', error);
}
});
}
}
},
成功回调配置如下:
uploadCallbacks() {
return {
onProgress: (loaded, total) => {
const percent = Math.floor(loaded / total * 100);
console.log('已上传: ', percent);
},
onCompleted: (data) => {
this.currentFile = data;
this.getFileUrl(data);
},
onError: (error) => {
console.error('上传失败', error);
}
}
},
注:如果是图片的话在onCompleted里面通过data.thumbnail是可以拿到图片的缩略图的。 接下来是获取文件或者图片的url,也需要在onComplete回调中获取,代码如下:
getFileUrl(data) {
if (data.thumbnail) {
this.currentFile.base64 = `data:image/jpg;base64,${data.thumbnail`;
}
this.rongIMClient.getFileUrl(this.currentType, data.filename, data.name, {
onSuccess: (data) => {
this.currentFile = Object.assign(this.currentFile, data);
this.sendFileMessage(this.currentType);
console.log('文件 url 为: ', data);
},
onError: function(error) {
console.log('get file url error', error);
}
})
},
拿到文件或者图片的url之后就可以发送图片或者文件消息了。
文件和图片消息发送
发消息代码如下:
sendFileMessage(type) {
let msg = {};
if (type === RongIMLib.FileType.IMAGE) {
msg = new RongIMLib.ImageMessage({content: this.currentFile.base64, imageUri: this.currentFile.downloadUrl});
} else {
msg = new RongIMLib.FileMessage({name: this.currentFile.name, size: this.currentFile.size, type: this.currentFile.type, fileUrl: this.currentFile.downloadUrl});
}
var conversationType = this.targetUser.conversationType;
var targetId = this.targetUser.id; // 目标 Id
var callback = {
onSuccess: (message) => {
this.handleMessage(message);
},
onError: (errorCode) => {
}
};
this.rongIMClient.sendMessage(conversationType, targetId, msg, callback);
},
至此,发送图片和文件消息完成,整体算是顺利……
融云官网地址:https://www.rongcloud.cn/
融云im撤回消息
赵炳东 发表了文章 • 0 个评论 • 20 次浏览 • 6 天前

由于疫情原因,公司基于融云做了个在线的聊天室,之前增加了一些聊天室的基础功能,最近呢由于需求补充,需要把消息撤回加上。 官方文档说明地址: https://docs.rongcloud.cn/v4/views/im/noui/guide/chatroom/msgmanage/msgrecall/web.html
撤回消息代码如下:
recall() {
const conversation = this.im.Conversation.get({
targetId: this.targetUser.id,
type: this.targetUser.conversationType
});
conversation.recall({
messageUId: this.currentMsg.messageUId,
sentTime: this.currentMsg.sentTime
}).then((message) => {
this.$message.success('撤回成功');
const msg = Object.assign({extra: {nickname: this.currentUser.nickname}}, message);
this.handleMessage(msg, false);
});
},
在此要注意,撤回成功之后是不会触发会话的监听的,需要自己在成功的回调里面处理撤回的消息。撤回消息处理代码如下:
if (message.messageType === 'RC:RcCmd') {
const msg = Object.assign({tip: `${isSelef ? '您': nickname}撤回了一条消息`}, message);
if (messageIds.includes(message.content.messageUId)) {
const index = messageIds.indexOf(message.content.messageUId);
this.messageList.splice(index, 1, msg);
} else {
this.messageList.push(message);
}
} else {
this.messageList.push(message);
}
当对方在消息监听中收到上述的消息时,也可以调用上述的方法进行撤回消息处理。
撤回消息现在是没有时间限制的,如果要加上时间限制,可以根据消息的sentTime处理。
至此,消息撤回已成功集成。集成中发现了一个问题,撤回的消息在会话列表中还存在,已经给融云提交工单,看后续能不能处理。
融云官网地址:https://www.rongcloud.cn/
融云开发文档地址:https://docs.rongcloud.cn/v4/
快速了解 Electron:基于 Web 跨平台桌面实现 - 即时通讯
徐凤年 发表了文章 • 0 个评论 • 22 次浏览 • 6 天前

Electron 知识普及
目前市面上的通讯软件多数都是支持多种平台的,Android 端、iOS 端、PC 端、Web 端、小程序端等。由于传统的 PC 端开发成本很高。所以今天给大家推荐使用 Electron 来实现 PC 端。
Electron 是通过将 Chromium 和 Node.js 合并到同一个运行时环境中,可以用 HTML、CSS 和 JavaScript 构建跨平台桌面应用程序。
Electron 可以将开发好的程序打包成 Mac、Windows 和 Linux 系统。
Electron 官网 https://www.electronjs.org/
Electron 开发 PC 端的理由
使用 Web 技术进行开发,开发成本低,可扩展性强;
跨平台,一套代码可打包为 Windows、Linux、Mac 三套软件;
可直接在现有 Web 应用上进行扩展;
提供浏览器不具备的能力;
实现即时通讯
传统 web 端通信多数都是由 websock 或者是长轮询实现的。目前市面上也有很多做即时通讯的三方,例如:融云,网易云等等。我选择的是融云。
融云提供了一个桌面端解决方案,是使用 Electron 实现。不过个人觉得那个版本有些低,但还是试用了下。
下载 Demo 启动起来,Demo 里面给的很简单不过基本的功能还是有的,把 Demo 中的地址换成了我自己的地址还是比较方便的。
此处省略了些实现过程,Electron 使用的是融云提供的 Demo, web 站点是之前集成的融云的 web 端 SDK。 如果大家想要了解可以先看下文档,由于项目中有很多其他模块内容就不再次展示了。
文档地址 https://docs.rongcloud.cn/v4/views/im/noui/guide/quick/include/web.html
由于我们场景就是单群聊,所以用到的核心接口如下。
初始化连接https://docs.rongcloud.cn/v4/views/im/noui/guide/quick/include/web.html#init
设置监听https://docs.rongcloud.cn/v4/views/im/noui/guide/quick/include/web.html#listener
连接融云https://docs.rongcloud.cn/v4/views/im/noui/guide/quick/include/web.html#connect
发消息https://docs.rongcloud.cn/v4/views/im/noui/guide/quick/include/web.html#send
当时测试时直接用的快速集成中的代码段进行了下修改。还是很方便的。如果需要大家可以自行查看。
结果上图
请问webSdk conversation.send 如何传递业务本地消息id,用来做发送界面状态更改
qyt 回复了问题 • 2 人关注 • 4 个回复 • 76 次浏览 • 2021-04-06 09:59
请问消息的UpStreamMessage 的sessionId是什么作用,还有DownStreamMessage的status和消息的接受状态数字好像对不上
admin 回复了问题 • 2 人关注 • 1 个回复 • 49 次浏览 • 2021-04-01 10:48
融云升级到到5.0报错
大神庵 发表了文章 • 0 个评论 • 86 次浏览 • 2021-03-18 11:45

使用 pod ,从4.x版本升级到 5.x,写法和报错如下
写法: [RCIM sharedRCIM].enableBurnMessage = YES; 报错:Property 'enableBurnMessage' not found on object of type 'RCIM *' 解决:把代码改成 RCKitConfigCenter.message.enableDestructMessage = YES; 因为 SDK 把接口从 RCIM 类移到了 RCKitMessageConf 中
解决完上述属性报错后,出现了以下报错: 报错:Apple Mach-O Linker Error
ld: library not found for -lopencore-amrnb
clang: error: linker command failed with exit code 1 (use -v to see invocation)解决:TARGETS - Build Settings - Other Linker Flags 里去掉 -l"opencore-amrnb"
解决完上述报错后,又出现了以下报错: 报错:Apple Mach-O Linker Error
ld: library not found for -lopencore-amrwb
clang: error: linker command failed with exit code 1 (use -v to see invocation)解决:TARGETS - Build Settings - Other Linker Flags 里去掉 -l"opencore-amrwb"
解决完上述报错后,又出现了以下报错: 报错:Apple Mach-O Linker Error
ld: library not found for -lvo-amrwbenc
clang: error: linker command failed with exit code 1 (use -v to see invocation)解决:TARGETS - Build Settings - Other Linker Flags 里去掉 -l"vo-amrwbenc"
希望大家可以活学活用,在报错的时候全局搜一下对应的关键词,看是不是引用的问题导致