【社区精华|持续更新】收录本社区精华内容,手把手教学IM/RTC开发! 置顶

admin 发表了文章 • 8 个评论 • 1184 次浏览 • 2020-12-07 14:41 • 来自相关话题

本文收录了GeekOnline社区精华内容,希望帮助社区开发者学习IM+RTC知识,解答疑惑。赠人玫瑰,手有余香,如您有不错的内容需要收录,欢迎在在评论区投稿回复。Android篇融云即时通讯SDK集成 — 通知检查融云 IM SDK 集成 —- 刷新会话界面... ...查看全部

本文收录了GeekOnline社区精华内容,希望帮助社区开发者学习IM+RTC知识,解答疑惑。赠人玫瑰,手有余香,如您有不错的内容需要收录,欢迎在在评论区投稿回复。

微信截图_20201207144054.png

Android篇

融云即时通讯SDK集成 — 通知检查

融云 IM SDK 集成 —- 刷新会话界面和会话列表界面

Android 端如何添加自定义表情

解决融云 SDK 4.0 版本配置 https 导航报 SSLHandshakeException

融云清空历史消息 Android 端

唠一唠融云的消息扩展功能

融云 IMkit 拦截或监听所有发送消息

融云如何把图片消息的图片上传到自己的文件服务器

唠一唠融云 VIVO push 无法跳转的解决方案

融云即时通讯SDK集成 — 定制UI(一) ——会话界面小改动

融云即时通讯SDK集成 — 定制UI(二) ——添加自定义表情库

融云即时通讯SDK集成 — 定制UI(三) ——兼容Android Q

融云如何把图片消息的图片上传到自己的文件服务器

融云即时通讯SDK集成 — 华为推送的点击跳转处理

带你实现女朋友欲罢不能的 App

Flutter 集成融云 sdk

配置融云SDK的自签证书

自定义消息 包含 list 数组

关于融云聊天室KV 值的正确使用

融云 IM SDK 转 AndroidX

融云即时通讯SDK集成 — 国内厂商推送集成踩坑篇(Android平台)

在融云 IMkit 会话界面基础上添加消息已读未读

融云聊天室属性 kv

融云 ConversationListFragment 会话列表添加头部布局

融云即时通讯SDK集成 — FCM推送集成指南(Android平台)

融云集成之避坑指南-Android推送篇

融云IMKit 动态删除或添加plugin 的实现


iOS篇

iOS 基于实时音视频 SDK 实现屏幕共享功能——1

iOS 基于实时音视频 SDK 实现屏幕共享功能——2

iOS 基于实时音视频 SDK 实现屏幕共享功能——3

iOS 基于实时音视频 SDK 实现屏幕共享功能——4

如何隐藏融云输入框语音按钮

给融云的输入框上方加个功能按钮,怎么整?

融云 IM SDK 如何插入消息

集成融云 IMLib 时,如何实现一套类似于 IMKit 的用户信息管理机制

为融云聊天页面的输入框添加 Placeholder

30 分钟集成融云 IM 即时通讯

简单介绍融云 imkit 包含功能

融云的聊天页面在 iOS14 出现崩溃的解决办法

融云聊天页面长按消息后“翻译”功能的实现方法

使用融云 IM 点击最近聊天记录时跳转到 @ 自己的消息

如何设置融云用户信息

自定义融云会话列表 cell 选中背景

融云 IMKit 音频录制参数

融云会话页面刷新不及时问题

融云 Flutter IM SDK 解析

关于融云 SDK 在使用 p8 证书的坎坷~

融云 SDK 如何实现群组操作

如何利用融云 IMLib 来实现一个阅后即焚功能

干货分享——使用融云通讯能力库 IMLib 实现单群聊的阅读回执


Web篇

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

微信小程序集成融云 SDK (即时通讯) 集成必备条件

Web 端使用融云 SDK 集成实现滑动加载历史消息

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

融云 Web SDK 如何实现表情的收发 ?

集成融云小程序 SDK 遇到的问题

使用融云 Web SDK 撤回消息

融云 RTC SDK 集成实现直播,趟坑之旅~~~

融云 Web SDK 删除历史消息

集成融云小程序 SDK 遇到的问题

Web 端集成融云 SDK 如何发送正确图片消息给移动端展示?

使用融云 IM SDK 实现 H5 直播聊天

WebRTC 实现实时音视频技术研究

融云发送语音消息

融云 CallLib 集成遇到的问题

结合融云 WebSDK 了解 WebSocket 基本原理

集成融云 Web 音视频通话踩坑之旅

SDK 兼容 JSON

融云 IM SDK 发送语音消息

集成融云 IM 问题总结

融云 Web SDK 如何实现只有一个设备登入

融云 Web 播放声音 — Flash 篇 (播放 AMR、WAV)

融云 IM 那些事儿

融云 AMR(Aduio) 播放 AMR 格式 Base64 码音频


社区福利

【领取见面礼】限量 100份 GeekOnline加油包!等你来拿

【有奖调研】Geek Online 2020 编程挑战赛参赛调研

【征稿活动】Geek Online 社区第一期投稿激励计划已启动!


GeekOnline编程挑战赛

Geek Online 2020 编程挑战赛官网

重磅!Geek Online 2020 编程挑战赛来了!

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的开发工程师,坐标合肥,待遇从优

和50万优质程序员一起成长——程序员客栈招聘

持续更新....

融云2.X升级到5.X遇到很多报错,重金酬谢

admin 回复了问题 • 2 人关注 • 1 个回复 • 143 次浏览 • 2021-05-24 10:56 • 来自相关话题

自定义消息android与ios交互问题

商赚有限公司 回复了问题 • 2 人关注 • 2 个回复 • 146 次浏览 • 2021-05-18 18:06 • 来自相关话题

需要我们自己部署后端程序吗

admin 回复了问题 • 2 人关注 • 1 个回复 • 167 次浏览 • 2021-05-17 10:07 • 来自相关话题

融云 IM 新增会话标签功能 实现即时消息高效管理

梅川酷子 发表了文章 • 0 个评论 • 146 次浏览 • 2021-05-07 14:18 • 来自相关话题

为解决不同类别聊天信息的管理、分类、不同群组的身份标记等会话信息管理的痛点需求,融云发布了即时通讯 IM 新功能:会话标签管理,可应用于政企客户内部通信、互联网泛娱乐社交、在线教育等诸多应用场景下,针对聊天会话个性分类的需求,实现即时消息的高效管理。 ... ...查看全部
为解决不同类别聊天信息的管理、分类、不同群组的身份标记等会话信息管理的痛点需求,融云发布了即时通讯 IM 新功能:会话标签管理,可应用于政企客户内部通信、互联网泛娱乐社交、在线教育等诸多应用场景下,针对聊天会话个性分类的需求,实现即时消息的高效管理。

 
会话管理的场景化痛点需求
 
移动互联网沟通场景中,每个用户的沟通列表都会存在大量来自不同联系人或群组的即时消息,类型繁多且不好管理。
 
如:泛娱乐社交行业的好友分组,企业即时通讯存在内部联系人、外部联系人、公司全员沟通群、部门沟通群,在线教育行业需要按班级分类,这些场景都需要对聊天会话进行分组或增加标签,来进行标识和管理,提升用户的使用体验。
 
详解融云 IM 的会话标签新功能
 
为了解决上述场景化需求,满足客户即时通讯中对会话管理的要求,融云 IM 产品新增了会话标签管理功能。通过融云 IMLib SDK 提供的会话分组管理及设置,主要可以实现以下功能:
 
一、提供创建、移除、编辑标签功能接口,获取用户创建的标签列表,实现自定义区分好友、非好友的会话分组,标签名称可以重复,同一聊天会话还支持添加到多个分组中,会话的免打扰、未读消息数等状态,在不同分组中显示一致。

微信图片_20210507141733.png

图 1:好友分组


二、支持针对会话设置标签功能接口,可添加/删除会话到一个标签,如分组中有置顶会话则优先显示置顶会话列表(按消息时间排序)。这样,可实现多个公众号消息聚合到一个群组内。

 

此外,为避免公众号群过多,仍然发生挤占正常消息的情况,可通过会话标签实现「稍后处理」的分组功能,在「稍后处理」的列表中通过过滤,实现会话列表只有 2 个公众号群优先显示。

微信图片_20210507141743.png

图 2:聚合公众号

 

这个功能还可根据一个群的创建源,来分组显示群会话列表,比如某个事业部下部门员工创建的群都归拢到一个聚合会话中。


三、通过会话标签功能,对本地产生的聊天会话显示类别标识,从而来区分会话属性,如:企业即时通讯存在内部联系人、外部联系人、公司全员沟通群、部门沟通群、机器人通知等聊天会话,即可通过此功能来实现。

微信图片_20210507141755.png

图 3:自定义会话属性

 
会话标签应用场景
 
目前,融云的即时通讯 IM 产品主要提供单聊、群聊、聊天室、系统通知等功能,基于海量客户的使用反馈,融云坚持每月进行 IM 产品的升级迭代,以提供稳定、好用的底层即时通讯能力给广大开发者和政府、大型企业行业用户。
 
面向政企客户,融云提供企业通信解决方案、协同办公解决方案、金融行业通信解决方案、公检法通信解决方案等多种行业解决方案,将 IM 能力赋能给千行百业。在协同办公场景中,对即时通信消息的管理,都可以应用会话标签管理这项新功能。
 
面向互联网开发者,融云的 IM 可广泛助力娱乐社交、在线教育、多人游戏、语聊、在线 KTV 等多场景的即时沟通。其中,娱乐社交中,如应用新增的会话标签功能,可实现好友、非好友的聊天管理;在线教育中,则可进行班级分组,兴趣小组分组,实现差异化教学和作业分级布置;在多人游戏场景中,可实现好友组队、非好友观战等分类信息浏览的区别化管理。
 
对开发者来说,要接入会话标签管理功能,只需调用融云 SDK 接口,无需再在 Sever 服务器端自己维护会话标签逻辑关系。这样,将极大降低开发者的开发时间和维护成本。
 
这项新功能支持 iOS、Android、Web、桌面版等用户多端状态同步,并且全部免费,这是使用融云 IM 开发者的新福利哦~!


app在后台被杀死,ConversationFragment的destroy方法中的mConversationType.equals()会报空指针

admin 回复了问题 • 2 人关注 • 1 个回复 • 218 次浏览 • 2021-05-06 11:09 • 来自相关话题

记录一次接入华为推送问题

深圳市众学汇科技有限公司 发表了文章 • 1 个评论 • 180 次浏览 • 2021-04-28 15:03 • 来自相关话题

接入的时候所有配置都正确的,但是启动项目就是不行报错,报错的信息也简单Execution failed for task ':app:mergeDebugManifest'. > com.android.manifmerger.Manif... ...查看全部

接入的时候所有配置都正确的,但是启动项目就是不行报错,报错的信息也简单

Execution failed for task ':app:mergeDebugManifest'.
> com.android.manifmerger.ManifestMerger2$MergeFailureException: java.io.FileNotFoundException: D:\HuaLu\app\build\intermediates\merged_manifests\debug\AndroidManifest.xml

初看以为是清单文件合并除了问题,但是最终还是排除了。实在没办法打印详细日志查看错误,

是华为的插件agconnect找不到,但是检查配置是没有问题的,编译也不会报错。后面又去华为官方论坛咨询

最后发现是Android studio4.1的Gradle4.1插件版本和融云文档上的

com.huawei.agconnect:agcp:1.3.1.300 有冲突,

解决办法是com.huawei.agconnect:agcp:1.4.1.300 修改为这个版本即可




融云im小程序集成初体验

大神庵 发表了文章 • 0 个评论 • 239 次浏览 • 2021-04-15 15:15 • 来自相关话题

最近领导让做一个小程序端的聊天功能,基于多方考虑,最终选择了融云的im来实现,那就先写个demo体验下吧。首先呢,当然是查看官方文档,文档地址如下: https://docs.rongcloud.cn/v4/views/im/noui/guide/p... ...查看全部

最近领导让做一个小程序端的聊天功能,基于多方考虑,最终选择了融云的im来实现,那就先写个demo体验下吧。

微信截图_20210415151418.png

首先呢,当然是查看官方文档,文档地址如下: 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 个评论 • 162 次浏览 • 2021-04-15 15:15 • 来自相关话题

前言公司产品需要新增即时通讯的模块,经过调研后使用融云的即时通讯 SDK 由于以前没有做过相关聊天类的项目,在开发的时候碰到了很多坑,下面会将碰到的问题和解决方案记录下来以做备份和学习交流融云官网:https://www.rongcloud.cn/ ... ...查看全部

前言

公司产品需要新增即时通讯的模块,经过调研后使用融云的即时通讯 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 个评论 • 165 次浏览 • 2021-04-15 15:15 • 来自相关话题

前段时间集成了web端融云的聊天功能,但是只能发送普通消息,最近产品经理出了新需求,需要把文件发送和图片发送加上,那就撸起袖子走一遍。官方文档说明地址如下: https://docs.rongcloud.cn/v4/views/im/noui/gui... ...查看全部

前段时间集成了web端融云的聊天功能,但是只能发送普通消息,最近产品经理出了新需求,需要把文件发送和图片发送加上,那就撸起袖子走一遍。

微信截图_20210415151151.png

官方文档说明地址如下: 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/


友情链接