融云im小程序集成初体验

Posted 2021-09-14 刘建伯

融云im小程序集成初体验

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

首先呢，当然是查看官方文档，文档地址如下:
https://docs.rongcloud.cn/v4/...

需要注意要在管理后台的小程序服务下将小程序的开关打开，否则会报错，相关的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/...

这样的话就可以连接成功了，哈哈，第一步总算是跨出去了。

接下来我们可以在连接成功后获取会话列表，代码如下：

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/