Flutter 项目如何快速接入 IM 组件库

1,196 阅读5分钟

目前市面上有较多厂商提供IM的UI组件库,如国外的getstream或国内的腾讯云IM。

目前,Flutter 正日益成为跨端开发的主流框架,它不仅能帮助客户端开发团队以最低成本开发多端应用,还能帮助众多的前端开发们,转型参与到APP及Web一体化开发中来。受到越来越多公司的追捧。

因此本文以腾讯云IM为例,演示如何快速为一个Flutter项目引入IM即时通信能力,基于他们提供的组件库。

步骤1:创建 Flutter 应用并添加权限

请参见 Flutter 文档 快速创建一个 Flutter 应用。

配置权限

一个IM项目,会涉及到拍摄/相册/录音/网络等权限,需要在 Native 的文件中手动声明,才可正常使用这些能力。

Android

打开 android/app/src/main/AndroidManifest.xml ,在 <manifest></manifest>中,添加如下权限。

    <uses-permission
        android:name="android.permission.INTERNET"/>
    <uses-permission
        android:name="android.permission.RECORD_AUDIO"/>
    <uses-permission
        android:name="android.permission.FOREGROUND_SERVICE"/>
    <uses-permission
        android:name="android.permission.ACCESS_NETWORK_STATE"/>
    <uses-permission
        android:name="android.permission.VIBRATE"/>
    <uses-permission
        android:name="android.permission.ACCESS_BACKGROUND_LOCATION"/>
    <uses-permission
        android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
    <uses-permission
        android:name="android.permission.READ_EXTERNAL_STORAGE"/>
    <uses-permission
        android:name="android.permission.CAMERA"/>

iOS

打开 ios/Podfile ,在文件末尾新增如下权限代码。

post_install do |installer|
  installer.pods_project.targets.each do |target|
    flutter_additional_ios_build_settings(target)
    target.build_configurations.each do |config|
          config.build_settings['GCC_PREPROCESSOR_DEFINITIONS'] ||= [
            '$(inherited)',
            'PERMISSION_MICROPHONE=1',
            'PERMISSION_CAMERA=1',
            'PERMISSION_PHOTOS=1',
          ]
        end
  end
end

安装 IM TUIkit

他们官方的 IM UI组件库被称作TUIKit。用之前需要先安装下。

#在命令行执行:
flutter pub add tim_ui_kit

如果你的应用还需要打包一份Web版本,还得手动引入两个JS文件。

打开 web/index.html ,在 <head> </head> 间引入这两个JS文件。如下:

<script src='./tim-upload-plugin.js'></script>
<script src="./tim-js-friendship.js"></script>

步骤2:初始化

如果还没有创建腾讯云IM的应用,需要先去他们官网,创建一个,并记一下SDKAPPID。最好再创建几个测试账户,后面用起来方便些。

在应用启动时,初始化IM项目。

先执行 TIMUIKitCore.getInstance() ,再调用初始化函数 init() ,并将您的sdkAppID传入。

/// main.dart
import 'package:tim_ui_kit/tim_ui_kit.dart';

final CoreServicesImpl _coreInstance = TIMUIKitCore.getInstance();
  @override
 void initState() {
   _coreInstance.init(
     sdkAppID: 0, // Replace 0 with the SDKAppID of your IM application when integrating
     // language: LanguageEnum.en, // 界面语言配置,若不配置,则跟随系统语言
     loglevel: LogLevelEnum.V2TIM_LOG_DEBUG,
     onTUIKitCallbackListener:  (TIMCallback callbackValue){}, // [建议配置,详见此部分](https://cloud.tencent.com/document/product/269/70746#callback)
     listener: V2TimSDKListener());
   super.initState();
 }
}

登录测试账户

  1. 此时,您可以使用上一步在控制台生成的测试账户,完成登录验证。

  2. 调用 _coreInstance.login方法,登录一个测试账户。

    import 'package:tim_ui_kit/tim_ui_kit.dart';
    
    final CoreServicesImpl _coreInstance = TIMUIKitCore.getInstance();
    _coreInstance.login(userID: userID, userSig: userSig);
    

步骤3:实现 - 会话列表页面

您可以以会话列表作为您的 IM 功能首页,其涵盖了与所有有聊天记录的用户及群聊的会话。

请创建一个 Conversation 类,body 中使用 TIMUIKitConversation 组件,渲染会话列表。

您仅需传入一个 onTapItem 事件的处理函数,用于跳转至具体会话聊天页的导航。关于 Chat 类,会在下一步讲解。

import 'package:flutter/material.dart';
import 'package:tim_ui_kit/tim_ui_kit.dart';

class Conversation extends StatelessWidget {
const Conversation({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
  appBar: AppBar(
    title: const Text(
      "Message",
      style: TextStyle(color: Colors.black),
    ),
  ),
  body: TIMUIKitConversation(
    onTapItem: (selectedConv) {
      Navigator.push(
          context,
          MaterialPageRoute(
            builder: (context) => Chat(
              selectedConversation: selectedConv,
            ),
          ));
    },
  ),
);
}
}

步骤4:实现 - 会话聊天页面

该页面由顶部主体聊天历史记录及底部发送消息模块组成。

请创建一个 Chat 类,body 中使用 TIMUIKitChat 组件,渲染聊天页面。

您最好传入一个 onTapAvatar 事件的处理函数,用于跳转至联系人的详细信息页。关于 UserProfile 类,会在下一步讲解。

import 'package:flutter/material.dart';
import 'package:tim_ui_kit/tim_ui_kit.dart';

class Chat extends StatelessWidget {
final V2TimConversation selectedConversation;
const Chat({Key? key, required this.selectedConversation}) : super(key: key);
String? _getConvID() {
return selectedConversation.type == 1
    ? selectedConversation.userID
    : selectedConversation.groupID;
}
@override
Widget build(BuildContext context) {
return TIMUIKitChat(
  conversationID: _getConvID() ?? '', // groupID or UserID
  conversationType: selectedConversation.type ?? 1, // Conversation type
  conversationShowName: selectedConversation.showName ?? "", // Conversation display name
  onTapAvatar: (_) {
        Navigator.push(
            context,
            MaterialPageRoute(
             builder: (context) => UserProfile(userID: userID),
        ));
  }, // Callback for the clicking of the message sender profile photo. This callback can be used with `TIMUIKitProfile`.
);
}

步骤5:实现 - 用户详情页面

该页面默认,可在只传入一个 userID 的情况下,自动根据是否是好友,生成用户详情页。

请创建一个 UserProfile 类,body 中使用 TIMUIKitProfile 组件,渲染用户详情及关系链页面。

如果需要自定义该页面,建议先用 profileWidgetBuilder 传入需自定义的 profile 组件并配合 profileWidgetsOrder 确定纵向排列顺序;如果无法满足,才可使用 builder 。

import 'package:flutter/material.dart';
import 'package:tim_ui_kit/tim_ui_kit.dart';

class UserProfile extends StatelessWidget {
    final String userID;
    const UserProfile({required this.userID, Key? key}) : super(key: key);

    @override
    Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
       title: const Text(
         "Message",
         style: TextStyle(color: Colors.black),
       ),
     ),
     body: TIMUIKitProfile(
          userID: widget.userID,
     ),
    );
  }
}

此时,您的应用已经可以完成消息收发,管理好友关系,展示用户详情及展示会话列表。

TUIKit 的更多能力

大家还可以继续使用以下 TUIKit 组件快速实现完整 IM 功能。

  • TIMUIKitContact:联系人列表页面。
  • TIMUIKitGroupProfile:群资料页面,使用方式与 TIMUIKitProfile 基本一致。
  • TIMUIKitGroup:群列表界面。
  • TIMUIKitBlackList:黑名单列表界面。
  • TIMUIKitNewContact:联系人(好友)申请列表。如需在外部显示小红点,可使用 TIMUIKitUnreadCount 小红点组件,其会自动挂载监听。
  • 本地搜索TIMUIKitSearch 全局搜索组件,支持全局搜索联系人/群组/聊天记录,也支持使用 TIMUIKitSearchMsgDetail 在特定会话中搜索聊天记录。两种模式取决于是否传入 conversation

UI 组件全貌可参见 他们的全览文档 或 组件详细文档

一些额外的插件

除 TUIKit 本体基础功能外,他们还提供了一些选装插件,可以进一步丰富 IM 能力。

个人比较推荐这些: