集成 IM UIKit

更新时间: 2024/05/24 14:50:30

云信 IM UIKit 是基于 NIM SDK(网易云信 IM SDK)开发的一款即时通讯 UI 组件库,包括聊天、会话、搜索、群管理等组件。本文介绍如何快速跑通 IM UIKit 的集成流程。

前提条件

在开始集成 IM UIKit 前,请确保:

  • 已在云信控制台创建应用,获取 App Key。
  • 注册云信 IM 账号,获取 accid 和 token。
  • 准备如下开发环境/工具:
    • Flutter-dart 3.10.0 及以上版本。
    • Android 端开发:
      • Android Studio Bumblebee。
      • App 要求 Android 5.0 API 21 及以上版本设备。
      • 1.6.10以上版本的 kotlin-gradle-plugin
    • iOS 端开发:
      • Xcode 12.0 及以上版本。
      • App 要求 iOS 12.0 以上版本设备。
      • 请确保您的项目已设置有效的开发者签名。

实现流程

uml diagram

步骤1:按需导入组件

根据业务需要,在您的项目的 pubspec.yaml 中,以添加依赖的形式添加相应的 IM UIKit 组件。

例如,需要通讯录功能和会话列表功能,可添加 nim_contactkit_ui: ^9.7.1nim_conversationkit_ui: ^9.7.1

  • 各组件相互独立,添加或删除均不影响项目编译。
  • 以下示例代码中的{LATEST_VERSION},建议使用最新版本,请参考更新日志
  • 更多组件导入说明,请参见组件导入
yamldependencies:
    # 通讯录功能
    nim_contactkit_ui: ^{LATEST_VERSION}
    # 会话列表功能组件
    nim_conversationkit_ui: ^{LATEST_VERSION}
    # 群组功能组件
    nim_teamkit_ui: ^{LATEST_VERSION}
    # 聊天功能组件
    nim_chatkit_ui: ^{LATEST_VERSION}
    # 搜索功能组件
    nim_searchkit_ui: ^{LATEST_VERSION}

步骤2:初始化

  1. 在应用的根Widget中,初始化您所使用到的模块组件,init方法主要做了模块路由注册。

  2. 配置路由表IMKitRouter.instance.routesMaterialApproutes参数。

  3. 在根组件的MaterialApp中配置supportedLocalesIMKitClient.supportedLocales

  4. 将使用到的模块多语言delegate配置到localizationsDelegates

    dartclass MyApp extends StatelessWidget {
      const MyApp({Key? key}) : super(key: key);
    
      void initPlugins() {
        ChatKitClient.init();
        TeamKitClient.init();
        ConversationKitClient.init();
        ContactKitClient.init();
        SearchKitClient.init();
      }
    
      // This widget is the root of your application.
      @override
      Widget build(BuildContext context) {
        // 1. 初始化您使用到的模块组件
        initPlugins();
        return MaterialApp(
          title: 'IM UIKit',
          // 2. 添加路由表配置
          routes: IMKitRouter.instance.routes,
          // 3. 添加支持的语言
          supportedLocales: IMKitClient.supportedLocales,
          // 4. 添加模块支持
          localizationsDelegates: [
            CommonUILocalizations.delegate,
            ConversationKitClient.delegate,
            ChatKitClient.delegate,
            ContactKitClient.delegate,
            TeamKitClient.delegate,
            SearchKitClient.delegate,
            ...GlobalMaterialLocalizations.delegates,
          ],
          home: const MyHomePage(title: 'IM UIKit'),
        );
      }
    }
    
  5. 准备好 APP Key,并在 IM UIKit 项目主页的 initState 中添加如下代码。

    dart// 这里以Android平台为例,填入APPKEY
    NIMAndroidSDKOptions options = NIMAndroidSDKOptions(appKey: "APP KEY");
    IMKitClient.init(appKey, options).then((success) {
        if (success) {
            // 初始化成功
        } else {
            // 初始化失败
        }
    }));
    

    更多初始化说明,请参见初始化

步骤3:登录

调用IMKitClient类中的如下方法进行登录。

方法名 参数 说明
loginIM NIMLoginInfo 登录IM

调用登录的方法时,将如下示例代码中的 accIdtoken 分别替换为您的云信账号 ID (即 accId)和 Token。

示例代码如下:

  • 登录 IM
dartIMKitClient.loginIM(NIMLoginInfo(account: "accId", token: "token")).then((success) {
    if (success) {
        //登录成功
    } else {
        //登录失败
    }
});

如果使用自动登录方式进行登录,那么在初始化时需要设置用户信息。初始化成功后再调用 getIt<LoginService>().syncUserInfo(account)方法同步数据。

步骤4:界面搭建

以搭建会话列表界面为例,您可以直接创建ConversationPage组件到您的应用中,还可以选择传入onUnreadCountChanged接口以获取当前未读消息数量信息。

示例代码如下:

dartclass _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: ConversationPage(
        onUnreadCountChanged: (unreadCount) {
          setState(() {
            chatUnreadCount = unreadCount;
          });
        },
      ),
    );
  }
}

会话列表界面最终搭建效果参考图如下:

界面集成详情

IM UIKit 中提供的常用业务场景界面及相关详细集成说明如下:

界面 所属组件 描述
ConversationPage nim_conversationkit_ui 会话列表界面(创建或者跳转到该界面需要传入参数,详见集成会话列表界面
ContactPage nim_contactkit_ui 通讯录界面 (创建或者跳转到该界面需要传入参数,详见集成通讯录界面
ChatPage nim_chatkit_ui 单聊/群聊会话界面(创建或者跳转到该界面需要传入参数,详见集成会话消息界面

后续步骤

为保障通信安全,如果您在调试环境中的使用的是云信控制台生成的 IM 账号(测试用),请确保在后续的正式生产环境中,将其替换为通过 IM 服务端 API 生成的正式 IM 账号。

此文档是否对你有帮助?
有帮助
去反馈
  • 前提条件
  • 实现流程
  • 步骤1:按需导入组件
  • 步骤2:初始化
  • 步骤3:登录
  • 步骤4:界面搭建
  • 界面集成详情
  • 后续步骤