跳到主要内容

快速上手

本教程旨在帮助开发者快速了解和掌握 IMLib SDK(融云即时通讯能力库)的基础集成流程与核心通信能力。通过本教程,您将完成从 IMLib SDK 导入、初始化、设置监听、建立连接和收发消息等全流程操作。

提示

uni-app 原生插件不能与 uni-app Imkit SDK 一起使用,uni-app Imkit SDK 是基于 Web IMLib SDK 开发的,uni-app 原生插件是基于 Android IOS 原生 SDK 开发的,所以只能使用其中一个,如果您单独使用 uni-app Imkit SDK 时,有聊天室等需求时,您可以调用 Web IMLib SDK 的 API 进行开发。

前置条件

提示

每个应用具有两个不同的 App Key,分别对应开发环境与生产环境,两个环境之间数据隔离。在您的应用正式上线前,可切换到使用生产环境的 App Key,以便上线前进行测试和最终发布。 应用的 App Key / Secret 是获取连接融云服务器身份凭证的必要条件,请注意不要泄露。

阅读 SDK 变更说明。SDK 在 5.2.4、5.4.0 均有较大变更,请确保您已充分了解相关差异,例如接口回调的方式变更等。

Demo 项目

融云 IMLib for uni-app SDK 提供了一个不含任何聊天界面的 Demo 项目,集中演示了各个接口的调用方法。

https://github.com/rongcloud/im-uni-app-wrapper

安装插件

  1. DCloud 插件市场 搜索并安装 RCUniIMV2 原生插件,或者手动下载安装插件放入 nativeplugins 目录下。

  2. 在 manifest.json -> APP 原生插件配置 -> 加入原生插件 RCUniIMV2

  3. 运行 -> 运行到手机 -> 制作自定义调试基座。

  4. 安装即时通讯 Typescript 依赖项

    请从 uni-app 插件市场安装 RongCloud-IMWrapper-V2

    如果您曾使用 NPM 安装过即时通讯依赖项 @rongcloud/imlib-uni,请在升级时替换为从插件市场安装的方式,并注意修改初始化代码。

  5. 在项目中集成引用

    JavaScript
    import RCIMIWEngine from "@/uni_modules/RongCloud-IMWrapper-V2/js_sdk/RCIMEngine"

初始化 IMLib SDK

为确保您可以正常连接融云服务器和使用融云即时通讯服务(IM 服务),您须调用 create 方法初始化 IMLib SDK。初始化前,您须在融云控制台中获取 App Key,并设置好 RCIMIWEngineOptions(初始化配置)。详见初始化。 RCIMIWEngineOptions 中封装了 RCIMIWAreaCode (数据中心的区域码),naviServer(导航服务地址)、fileServer(文件服务地址)、statisticServer(数据统计服务地址),enablePush(推送的开关)。详见引擎配置。(注意: RCIMIWAreaCode 跟 naviServer 只设置其中一个即可)。 如果您使用北京数据中心,则不需设置 RCIMIWAreaCode 或者 naviServer ,IMLib SDK 默认连接北京数据中心。

TypeScript
let appKey = 'Your_AppKey'
let options = {};
// 可以将创建好的 engnie 保存到全局变量中,以便多页面使用
let engine = await RCIMIWEngine.create(appKey, options);

监听消息

通过设置消息接收监听器,用户可接收所有类型的实时消息和离线消息。

  1. message 接收到的消息对象

  2. left 当客户端连接成功后,服务端会将所有补偿消息以消息包的形式下发给客户端,最多每 200 条消息为一个消息包,即一个 Package, 客户端接受到消息包后,会逐条解析并通知应用。left 为当前消息包(Package)里还剩余的消息条数

  3. offline 消息是否离线消息

  4. hasPackage 是否在服务端还存在未下发的消息包

    TypeScript
    engine.setOnMessageReceivedListener((res) => {
    //...
    });

连接融云 IM 服务器

  1. 为模拟用户通过融云 IM 服务器收发消息,您需要首先注册一个用户。在实际业务中,应用客户端通过应用服务端调用融云 IM Server API 获取 token。详见 Server API 文档[注册用户]。在本教程中,为了快速体验融云服务,您可在控制台「北极星」的 API 调试页面调用[获取 Token] 接口,获取到 userId 为 1 的用户的 Token。调用返回如下:

    HTTP
    HTTP/1.1 200 OK
    Content-Type: application/json; charset=utf-8
    {"code":200,"userId":"1","token":"gxld6GHx3t1eDxof1qtxxYrQcjkbhl1V@sgyu. cn.example.com;sgyu.cn.example.com"}
  2. 设置连接监听器来实时获取连接状态。您可以将连接状态通过 UI 反馈给用户(例如提示 “网络连接中断” 或 “已重新连接”),提高用户体验。建议在应用生命周期内设置 IM 连接状态监听器,并在不需要的时候移除监听器。详见连接状态监听

    TypeScript
    engine.setOnConnectionStatusChangedListener((res) => {
    //...
    });
  3. 调用 connect 方法,将 userId 为 1 的用户连接融云 IM 服务。注:IMLib SDK 有重连机制,因此一个应用生命周期内调用一次 connect 即可,详见连接

    TypeScript
    let callback = {
    onDatabaseOpened:(res) => {
    //...
    },
    onConnected:(res) => {
    //...
    }};
    let code = await engine.connect(token, timeout, callback);

连接成功的回调,onConnected 参数说明:

  • code 连接状态码,0 代表连接成功。
  • userId 连接成功的用户 ID。

发送消息

注意

SDK 5.4.0 版本及以后,大部分接口新增了 callback 参数,方法调用成功后的数据会在 callback 中回调。

发送普通消息使用 SendMessage 方法。发送结果通过 RCIMIWSendMessageCallback 中的方法返回。您可以通过消息介绍了解如何构建普通消息,例如文本消息、引用消息、自定义消息等。

TypeScript
let message = await engine.createTextMessage(
type,
targetId,
channelId,
text,
);

let callback = {
onMessageSaved:(res) => {
//...
},
onMessageSent:(res) => {
//...
}};
let code = await engine.sendMessage(message, callback);

发送媒体消息使用 SendMediaMessage 方法。发送进度及结果通过 RCIMIWSendMediaMessageListener 中的方法返回。您可以通过消息介绍了解如何构建媒体消息,例如图片消息、语音消息、视频消息、文件消息、GIF 消息等。

TypeScript
uni.chooseImage({
count: 1,
success: async (res) => {
if (res.tempFilePaths.length < 0) return;
//转为平台路径
let path = 'file:///' + plus.io.convertLocalFileSystemURL(res.tempFilePaths[0])
//创建图片消息
let message = await engine.createImageMessage(type, targetId, channelId, path);
}
});

let listener = {
onMediaMessageSaved:(res) => {
//...
},
onMediaMessageSending:(res) => {
//...
},
onSendingMediaMessageCanceled:(res) => {
//...
},
onMediaMessageSent:(res) => {
//...
}};
let code = await engine.sendMediaMessage(message, listener);

退出登录

TypeScript
let code = await engine.disconnect(receivePush);

引擎销毁

TypeScript
let code = await engine.destroy();