IM 即时通讯
Flutter
产品介绍
简介
主要功能
产品优势
接口及业务限制
功能介绍
帐号集成与登录
基础消息功能
群组功能
聊天室功能
聊天室标签功能
圈组功能
多端登录与互踢策略
质量数据监控台
更新日志
IM UIKit 更新日志
NIM SDK 更新日志
快速开始
跑通 IM Demo 源码
实现单聊消息收发(不含 UI)
实现圈组消息收发(不含 UI)
含 UI 集成
什么是 IM UIKit
IM UIKit 功能列表
快速集成 IM UIKit
组件导入
初始化
界面跳转
全局配置
语言设置
会话列表相关
集成会话列表界面
事件监听
自定义会话列表界面 UI
会话消息相关
集成会话界面
事件监听
发送自定义消息
自定义会话界面 UI
通讯录相关
集成通讯录界面
事件监听
自定义通讯录界面 UI
IM UIKit 常见问题排查
不含 UI 集成
集成 SDK
初始化
登录相关
登录 IM
多端登录与互踢
登出 IM
消息相关
消息概述
消息收发
NOS 存储场景
消息配置选项
语音消息处理
广播消息收发
消息已读回执
消息撤回
消息重发与转发
消息更新
插入本地消息
最近会话
用户资料
用户关系
在线状态订阅
历史消息
系统通知
Android 离线推送与消息提醒
APNs 离线推送
群组功能
群组概述
群组管理
群成员管理
群消息管理
超大群
反垃圾
开通聊天室功能
聊天室
圈组功能
已知问题
圈组概述
圈组登录管理
服务器相关
服务器概述
服务器管理
服务器成员管理
服务器未读数管理
频道相关
频道概述
频道管理
频道黑白名单
频道未读数管理
搜索服务器与频道
身份组相关
身份组概述
身份组应用场景
服务器身份组
频道身份组
用户定制权限
身份组相关查询
成员权限查询与判定
圈组消息相关
图解圈组消息流转
圈组消息收发
圈组消息撤回
圈组消息更新
圈组消息删除
查询历史消息
会话消息回复(Thread)
圈组快捷评论
圈组消息缓存
获取频道最后一条消息
圈组消息搜索
圈组订阅机制
圈组离线推送
圈组系统通知相关
圈组系统通知概述
圈组系统通知收发
圈组系统通知更新
圈组内容审核
圈组相关抄送
圈组第三方回调
聊天扩展
其他
服务端会话服务
最佳实践
IM 登录最佳实践
API 参考
Flutter API 参考
错误码和警告码
IM 控制台指南
创建应用
升级服务
注册 IM 账号
服务协议
常见问题
第三方推送厂商的限制说明

快速集成 IM UIKit

更新时间: 2022/12/05 17:17:42

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

前提条件

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

  • 获取示例项目
  • 云信控制台完成以下操作。
    创建应用并获取 App Key 和 App Secret 1. 在左侧导航栏中找到“应用”,并单击“创建”。
    创建应用
    2. 填写应用的基本信息后,单击“创建”。
    创建应用
    3. 创建应用后,可以在左侧导航栏中查看该应用,并单击 “App Key 管理”,并获取 App Key 和 App Secret。
    查看应用的AppKey
    注册云信 IM 账号,获取 accid 和 token

    注册云信 IM 账号,获取 accid 和 token。accid 和 token 将用于登录云信服务端。

    1. 在左侧导航栏中单击指定应用名称,进入该应用的详情页面。
    2. 在“功能管理”中单击“账号管理”。
    账号管理
    3. 在测试页面,单击“新建账号”,并填写账号(即accid)、昵称(即 name)、密码(即 Token)后,单击“确定”。
    确定
  • 准备如下开发环境/工具:
    • Flutter-dart 2.16.1 及以上版本。
    • Android 端开发:
      • Android Studio Bumblebee。
      • App 要求 Android 5.0 API 21 及以上版本设备。
      • 1.6.10以上版本的 kotlin-gradle-plugin
    • iOS 端开发:
      • Xcode 11.0 及以上版本。
      • App 要求 iOS 11.0 以上版本设备。
      • 请确保您的项目已设置有效的开发者签名。

实现流程

uml diagram

步骤1:按需导入组件

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

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

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

步骤2:初始化

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

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

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

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

    class 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 中添加如下代码。

    // 这里以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
IMKitClient.loginIM(NIMLoginInfo(account: "accId", token: "token")).then((success) {
    if (success) {
        //登录成功
    } else {
        //登录失败
    }
});

步骤4:界面搭建

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

示例代码如下:

class _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:界面搭建
  • 界面集成详情
  • 后续步骤