随着智能设备的高速迭代,开发者在开发时不得不花费大量精力适配众多设备和平台,同时还要面对低延迟、高可用和跨平台兼容等各种挑战。对于强调随时随地交流的聊天应用等实时通信工具,尤其如此。面对智能手机、平板电脑、PC、物联网终端等众多设备,如何在所有平台上,提供统一、高性能的聊天体验成了一件让开发者头痛的难事。
颠覆传统方案
快速构建多端适配的高质量聊天应用
传统的开发方案是为每个设备和平台单独定制对应的应用程序,这无疑辉大幅增加开发成本和时间。基于Web的解决方案虽然为多平台快速部署提供了一个不错的方向,但却往往需要开发者在性能和用户体验方面做出妥协。
随着Flutter架构的推出,这个问题终于看到了解决的曙光。谷歌推出的Flutter框架具备强大的多平台开发能力,允许开发者使用一套代码库为手机、平板、电脑、Web等多个平台构建高质量的应用程序,从而实现跨平台兼容及快速部署。而Flutter IM UIKit则是腾讯云基于Flutter架构推出的一款高性能UI组件库,旨在帮助开发者快速构建高质量的聊天应用。通过使用Flutter IM UIKit,开发者一次开发就可打造多终端适配,且低延迟、高可用的高性能聊天应用。
丰富且领先的产品能力
Flutter IM UIKit核心优势
一套代码,跨平台兼容
- 支持嵌入式平板设置;
- 一套代码无缝集成,仅需两步即可实现开发;
- 全平台支持(手机、平板、PC和网页)。
行业首创,支持物联网终端
- 灵活控制智能物联网产品,如智能家居系统中的中央控制面板;
- 简化的嵌入式终端设备操作逻辑;
- 能够实现跨终端聊天通信,并使用信令消息对物联网设备进行实时、超低延迟的控制,以实现有效的设备管理。
丰富且可定制的UI组件
- 对话、消息、联系人、语音/视频通话等丰富的场景组件;
- 提供暗色和亮色模式的定制选项;
- 全面的聊天功能以及丰富的用户体验特性,如丰富的动画、触觉反馈和现代简约的设计。
多元应用场景
可在全球范围广泛部署
- 针对200+国家的网络进行了优化;
- 支持多种语言(包含英语、阿拉伯语、日语、韩语、中文等,并支持添加更多语言)。
可靠且超低延迟的音频/视频传输
- 延迟低于300毫秒;
- 在60%弱网络丢包情况下,发送成功率仍可高于99.99%。
专为开发者设计
- 支持选择性导入组件,模块化打包,支持自动导航;
- 简化的组件参数设计;
- 支持全局和组件实例级别的管理;
- 清晰的代码命名规范和详细的注释。
此外,开发者还可以在GitHub上探索我们更为完善、综合的Demo,以获得更直接、更沉浸式的体验。
轻松上手
Flutter IM UIKit集成指南
在控制台中设置您的应用程序
-
创建帐户:访问腾讯云控制台,按照提示创建一个帐户。
-
开始免费试用:在主页上创建一个应用程序,并开始您的免费试用。数据中心请选择最贴近您目标客户的地域。
- 生成测试用户:在账户管理中创建两个用户(测试帐户)。然后使用UserSig工具为它们创建相应的UserSigs,稍后会用到这些UserSigs。
- 获取您的SDKAppID:转到应用程序,选择您新创建的应用程序,然后跳转到相应的应用程序概述以找到您的SDKAppID。
此时,控制台设置便已完成。请记下SDKAppID以及两组UserID和UserSig,便于后续使用。
快速集成Flutter IM UIKit
以下步骤为Flutter IM UIKit集成的简要步骤,详细的集成过程,请参阅官网指南(https://www.tencentcloud.com/zh/document/product/1047/58585)。
开始之前,需要您准备好一个Flutter项目或创建一个新项目。你可根据文档指引(https://docs.flutter.dev/get-started/codelab),创建一个Flutter新项目。
此外,后续步骤涉及客户端项目和代码操作。为了方便体验,我们使用简化的集成项目源代码(此源代码仓库仅用于展示集成步骤)。如果您对拥有广泛功能范围、高级功能和定制选项的全面应用程序感兴趣,可以前往GitHub查看完整的项目代码(https://github.com/TencentCloud/chat-demo-flutter/tree/v2)。
步骤1:导入软件包
首先,请导入基本软件包,tencent_cloud_chat(https://pub.dev/packages/tencent_cloud_chat)。
flutter pub add tencent_cloud_chat
接下来,导入适合您需求的UI组件包:
flutter pub add tencent_cloud_chat_message
flutter pub add tencent_cloud_chat_conversation
flutter pub add tencent_cloud_chat_contact
flutter pub add tencent_cloud_chat_user_profile
flutter pub add tencent_cloud_chat_group_profile
在本次体验中,我们建议您导入所有的组件。但在实际项目中,您可以根据具体需求,选择需要导入的组件。
步骤2:UIKit的初始设置
在使用每个模块化包UI组件之前,请按照以下初始设置步骤操作。
全局配置:将项目中的MaterialApp替换为TencentCloudChatMaterialApp。这将自动管理和配置语言、主题(基于material3)、主题模式和其他设置。如果您更喜欢进行手动配置,请参阅文档进行配置。
初始化和登录:调用TencentCloudChat.controller.initUIKit进行初始化和登录。传入您之前记录的应用程序的SDKAppID、UserID和UserSig。同时,在usedComponentsRegister列表中声明每个子模块化UI包的注册。
TencentCloudChat.controller.initUIKit(
options: const TencentCloudChatInitOptions(
sdkAppID: , /// [Required]: The SDKAppID of your Tencent Cloud Chat application
userID: , /// [Required]: The userID of the logged-in user
userSig: , /// [Required]: The userSig of the logged-in user
),
components: const TencentCloudChatInitComponentsRelated( /// [Required]: The modular UI components related settings, taking effects on a global scale.
usedComponentsRegister: [
/// [Required]: List of registration functions for the components used in the Chat UIKit.
TencentCloudChatConversationManager.register,
TencentCloudChatMessageManager.register,
TencentCloudChatUserProfileManager.register,
TencentCloudChatGroupProfileManager.register,
TencentCloudChatContactManager.register,
],
),
);
完成全局配置后,我们现在可以深入了解如何使用模块化UI组件。
步骤3:集成模块化UI组件
在大多数用例中,您将需要手动实例化并将TencentCloudChatConversation和TencentCloudChatContact组件添加到Widget中(如果需要)。其他组件会根据用户操作自动导航。在本教程中,我们将使用bottomNavigationBar来管理页面并在TencentCloudChatConversation和TencentCloudChatContact组件之间切换。
首先,声明一个currentIndex变量和一个List
List<Widget> pages = [];
int currentIndex = 0;
将实例存储在 pages 数组中:
pages = [
const TencentCloudChatConversation(),
const TencentCloudChatContact(),
];
最后,按照以下方式修改 build 方法:
@override
Widget build(BuildContext context) {
return Scaffold(
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
currentIndex: currentIndex,
onTap: (index) async {
if (index != currentIndex) {
setState(
() {
currentIndex = index;
},
);
}
},
items: const [
BottomNavigationBarItem(
icon: Icon(Icons.chat_bubble_outline), label: "Chats"),
BottomNavigationBarItem(
icon: Icon(Icons.contacts), label: "Contacts"),
],
),
body: pages[currentIndex],
);
}
至此,您已成功完成了Flutter IM UIKit的集成。现在,让我们运行项目并体验 Flutter Chat UIKit。
体验Flutter IM UIKit的实际效果
-
使用在 initUIKit 方法中创建的第一个测试帐户登录,并启动应用程序。
-
运行 flutter run。
注意:如果您在运行 iOS 时遇到问题,或者 Android SDK 版本不匹配,请参考我们的文档(https://github.com/TencentCloud/chat-uikit-flutter/tree/v2/tencent_cloud_chat/example)并选择适当的版本配置。
成功进入应用后,您将看到会话和联系人页面,并可以在底部进行切换。但是,目前还没有会话可供测试。切换到联系人页面,点击右上角的“添加联系人”,将另一个测试帐户添加为联系人。
现在,您将在联系人列表中看到另一个帐户。点击联系人开始聊天。您还可以重新运行应用程序,使用另一个用户的 UserID 登录,并体验相互发送消息。
有关详细集成、配置和高级用法的更多信息,请参阅文档:https://www.tencentcloud.com/zh/document/product/1047/58585
如果您想要进一步了解或使用腾讯云相关能力,欢迎扫描下方二维码添加音视频小姐姐微信,我们将安排产研同学专门跟进您的需求。