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

其次呢，我们需要把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/ ... ...查看全部

前言

公司产品需要新增即时通讯的模块，经过调研后使用融云的即时通讯 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/gui... ...查看全部

前段时间集成了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/chatro... ...查看全部

由于疫情原因，公司基于融云做了个在线的聊天室，之前增加了一些聊天室的基础功能，最近呢由于需求补充，需要把消息撤回加上。官方文档说明地址： 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 是通过将 C... ...查看全部

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

由于我们场景就是单群聊，所以用到的核心接口如下。

当时测试时直接用的快速集成中的代码段进行了下修改。还是很方便的。如果需要大家可以自行查看。

结果上图

使用 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"

希望大家可以活学活用，在报错的时候全局搜一下对应的关键词，看是不是引用的问题导致

通知设置新通知

IM即时通讯

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

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

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

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

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

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

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

使用融云 Web SDK 撤回消息

融云im小程序集成初体验

集成融云即时通讯碰到的一些问题

前言

问题列表

融云发送文件和图片消息

文件和图片上传

文件和图片消息发送

融云im撤回消息

快速了解 Electron：基于 Web 跨平台桌面实现 - 即时通讯

Electron 知识普及

Electron 开发 PC 端的理由

实现即时通讯

结果上图

融云实时语音通话

请问webSdk conversation.send 如何传递业务本地消息id，用来做发送界面状态更改

请问消息的UpStreamMessage 的sessionId是什么作用，还有DownStreamMessage的status和消息的接受状态数字好像对不上

融云升级到到5.0报错

使用 pod ，从4.x版本升级到 5.x，写法和报错如下

热门文章

热门用户

友情链接申请友链

通知设置 新通知

IM即时通讯

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

前言

问题列表

文件和图片上传

文件和图片消息发送

Electron 知识普及

Electron 开发 PC 端的理由

实现即时通讯

结果上图

使用 pod ，从4.x版本升级到 5.x，写法和报错如下

热门文章

热门用户

友情链接 申请友链

通知设置新通知

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

友情链接申请友链