腾讯云即时通信IMiOS_AI解决方案_同尘科技
TUIKit 从 5.7.1435 版本开始支持模块化集成,您可以根据自己的需求集成所需模块。
TUIKit 从 6.9.3557 版本开始新增了全新的简约版 UI 组件,之前版本 UI 组件依旧保留,我们称之为经典版 UI 组件,您可以根据需求自由选择经典版或简约版 UI 组件。如果您还不了解各个界面库的功能,可以查阅文档 TUIKit 界面库介绍。下文将介绍如何集成 TUIKit 组件。
开发环境要求
Xcode 10 及以上iOS 9.0 及以上
CocoaPods 集成
1. 安装 CocoaPods。
在终端窗口中输入如下命令(需要提前在 Mac 中安装 Ruby 环境):
sudo gem install cocoapods
2. 创建 Podfile 文件。
进入项目所在路径输入以下命令行,之后项目路径下会出现一个 Podfile 文件。
pod init
3. 根据业务需求在 Podfile 中添加对应的 TUIKit 组件之间相互独立,添加或删除均不影响工程编译。 提供了两种 Podfile集成方式, Pods集成(方式一)和 DevelopPods本地集成(方式二)。说明:Pods 集成(方式一) 适合无源码修改时的集成:优点是: 当 TUIKit 有版本更新时您只需再次 Pod update 即可完成更新。缺点是: 当您有源码修改时,使用 Pod update 更新时,新版本的 TUIKit 会覆盖您的修改。DevelopPods 本地集成(方式二) 适合有涉及源码自定义修改的客户:优点是: 当您有自己的 git 仓库时,可以跟踪修改,并且修改源码后,使用 Pod update 更新(其他非本地集成 Pod)时,不会覆盖您的修改。缺点是: 您需要手动从 TUIKit 源码 覆盖您本地 TUIKit 文件夹进行更新。
方式1:拉取远程 CocoaPods 集成(无源码修改时推荐)
经典版简约版
# Uncomment the next line to define a global platform for your project# ...
# 防止 TUIKit 组件里的 *.xcassets 与您项目里面冲突。install! 'cocoapods', :disable_input_output_paths => true
# 请使用您的真实项目名称替换 your_project_nametarget 'your_project_name' do # 从 7.1 版本开始,新增了 TUIKit 插件(TUIXXXPlugin),TUIKit 插件是动态库依赖,需要开启此设置。 # 如果您不依赖 TUIKit 插件,该设置可以保持关闭。 use_frameworks! # 请按需开启 modular headers,开启后 Pod 模块才能使用 @import 导入,简化 Swift 引用 OC 的方式。 # use_modular_headers!
# 集成聊天功能 pod 'TUIChat/UI_Classic' # 集成会话功能 pod 'TUIConversation/UI_Classic' # 集成关系链功能 pod 'TUIContact/UI_Classic' # 集成群组功能 pod 'TUIGroup/UI_Classic' # 集成搜索功能(需要购买旗舰版套餐) pod 'TUISearch/UI_Classic' # 集成音视频通话功能 pod 'TUICallKit' # 集成投票插件,从 7.1 版本开始支持 pod 'TUIPollPlugin' # 集成群接龙插件,从 7.1 版本开始支持 pod 'TUIGroupNotePlugin' # 集成翻译插件,从 7.2 版本开始支持(需开通增值功能,请联系腾讯云商务开通) pod 'TUITranslationPlugin' # 集成会话分组插件,从 7.3 版本开始支持 pod 'TUIConversationGroupPlugin' # 集成会话标记插件,从 7.3 版本开始支持 pod 'TUIConversationMarkPlugin' # 集成语音转文字插件,从 7.5 版本开始支持 pod 'TUIVoiceToTextPlugin' # 集成客服插件,从 7.6 版本开始支持 pod 'TUICustomerServicePlugin' # 集成消息推送插件,从 7.6 版本开始支持 pod 'TIMPush'end
# Uncomment the next line to define a global platform for your project# ...
# 防止 TUIKit 组件里的 *.xcassets 与您项目里面冲突。install! 'cocoapods', :disable_input_output_paths => true
# 请使用您的真实项目名称替换 your_project_nametarget 'your_project_name' do use_frameworks!
# 开启 modular headers。请按需开启,开启后 Pod 模块才能使用 @import 导入。 # use_modular_headers!
# 集成聊天功能 pod 'TUIChat/UI_Minimalist' # 集成会话功能 pod 'TUIConversation/UI_Minimalist' # 集成关系链功能 pod 'TUIContact/UI_Minimalist' # 集成群组功能 pod 'TUIGroup/UI_Minimalist' # 集成搜索功能(需要购买旗舰版套餐) pod 'TUISearch/UI_Minimalist' # 集成离线推送 pod 'TUIOfflinePush' # 集成音视频通话功能 pod 'TUICallKit' # 集成翻译插件,从 7.2 版本开始支持(需开通增值功能,请联系腾讯云商务开通) pod 'TUITranslationPlugin'
end
说明1. 如果您直接 pod 'TUIChat'
,不指定经典版或简约版,默认会集成两套版本 UI 组件。 2. 经典版和简约版 UI 不能混用,集成多个组件时,您必须同时全部选择经典版 UI 或简约版 UI。例如,经典版 TUIChat 组件必须与经典版 TUIConversation、TUIContact、TUIGroup组件搭配使用。同理,简约版 TUIChat 组件必须与简约版 TUIConversation、TUIContact、TUIGroup 组件搭配使用。3. 如果您使用的是 Swift,请开启 use_modular_headers!,并将头文件引用改成 @import 模块名形式引用。4. 执行以下命令,安装 TUIKit 组件。
pod install
如果无法安装 TUIKit 最新版本,执行以下命令更新本地的 CocoaPods 仓库列表。
pod repo update
之后执行以下命令,更新组件库的Pod版本
pod update
集成全部的 TUIKit 组件后的项目结构:
方式2:DevelopPods源码集成(有源码修改时推荐)
1. 从 GitHub 下载 TUIKit 源码。直接拖入您的工程目录下: TIMSDK/iOS/TUIKit
2. 修改您Podfile中每个组件的本地路径, 路径修改为TUIKit文件夹相对您工程Podfile文件的路径 如 Demo中的 pod ‘TUICore’, :path => “../TUIKit/TUICore”说明: 示例图片中的TUIKit文件夹位于 Podfile的 上一层级(父目录),此时 我们使用 pod ‘TUICore’, :path => “../TUIKit/TUICore”—————————————————————————————其他相对路径的表示如下:父目录: pod ‘TUICore’, :path => “../TUIKit/TUICore”当前目录: pod ‘TUICore’, :path => “/TUIKit/TUICore”子目录: pod ‘TUICore’, :path => “./TUIKit/TUICore”3. Pod updateDevelopPodfile
# Uncomment the next line to define a global platform for your projectsource 'https://github.com/CocoaPods/Specs.git'platform :ios, '13.0'install! 'cocoapods', :disable_input_output_paths => true
target 'TUIKitDemo' do # Uncomment the next line if you're using Swift or would like to use dynamic frameworks use_frameworks! use_modular_headers!
# 注意:使用本地集成方案时,如需升级时需要从 # https://github.com/TencentCloud/TIMSDK/tree/master/iOS/TUIKit # 获取最新的组件代码,放置在本地指定目录下如/TIMSDK/ios/TUIKit/TUICore # 注意:当私有化修改和远端有冲突时,需要手动合并,处理冲突。 pod 'TUICore', :path => "../TUIKit/TUICore" pod 'TIMCommon', :path => "../TUIKit/TIMCommon" pod 'TUIChat', :path => "../TUIKit/TUIChat" pod 'TUIConversation', :path => "../TUIKit/TUIConversation" pod 'TUIContact', :path => "../TUIKit/TUIContact" pod 'TUIGroup', :path => "../TUIKit/TUIGroup" pod 'TUISearch', :path => "../TUIKit/TUISearch" # 注意: TUIKit插件需要跟随TUICore的版本 # 需要确保插件版本和"../TUIKit/TUICore/TUICore.spec"中的spec.version一致 pod 'TUIPollPlugin', '7.6.5011' pod 'TUIGroupNotePlugin', '7.6.5011' pod 'TUITranslationPlugin', '7.6.5011' pod 'TUIConversationGroupPlugin', '7.6.5011' pod 'TUIConversationMarkPlugin', '7.6.5011' pod 'TIMPush', '7.6.5011' # 其他 Pod pod 'TUICallKit' pod 'TUIRoomKit' pod 'MJRefresh' pod 'Masonry'end
注意:使用本地集成方案时,如需升级时需要从 https://github.com/TencentCloud/TIMSDK/tree/master/iOS/TUIKit 获取最新的组件代码,覆盖本地目录如:TIMSDK/iOS/TUIKit注意:当私有化修改和远端有冲突时,需要手动合并,处理冲突。注意:TUIKit插件需要依赖TUICore的版本 务必确保插件版本和”../TUIKit/TUICore/TUICore.spec”中的spec.version一致
快速搭建
常用的聊天软件都是由会话列表、聊天窗口、好友列表、音视频通话等几个基本的界面组成,参考下面步骤,您仅需几行代码即可在项目中快速搭建这些 UI 界面。说明 关于 TUIKit 组件模块功能:实操教学视频请参见:极速集成 TUIKit(iOS)。如果想了解更多,您还可以 下载并运行 TUIKitDemo 源码,内含常见功能示例。
步骤1:组件登录
登录组件后才能正常使用组件的功能。用户在 App 上点击登录时,您可以登录 TUIKit 组件。
SDKAppID 需要在 即时通信 IM 控制台 创建并获取,userSig 需要按规则计算,详细步骤请参考文档 快速入门。示例代码如下所示:
#import "TUILogin.h"
- (void)loginSDK:(NSString *)userID userSig:(NSString *)sig succ:(TSucc)succ fail:(TFail)fail { [TUILogin login:SDKAppID userID:userID userSig:sig succ:^{ NSLog(@"登录成功"); } fail:^(int code, NSString *msg) { NSLog(@"登录失败"); }];}
步骤2:构建会话列表
会话列表只需要创建 TUIConversationListController
对象即可。会话列表会从数据库中读取最近联系人,当用户点击联系人时,TUIConversationListController
将事件 didSelectConversation
回调给上层。示例代码如下所示:经典版简约版
#import "TUIConversationListController.h"
// ConversationController 为您自己的 ViewController@implementation ConversationController - (void)viewDidLoad { [super viewDidLoad]; // TUIConversationListController TUIConversationListController *vc = [[TUIConversationListController alloc] init]; vc.delegate = self; // 把 TUIConversationListController 添加到自己的 ViewController [self addChildViewController:vc]; [self.view addSubview:vc.view];}
- (void)conversationListController:(TUIConversationListController *)conversationController didSelectConversation:(TUIConversationCell *)conversation{ // 会话列表点击事件,通常是打开聊天界面}@end
#import "TUIConversationListController_Minimalist.h"
// ConversationController 为您自己的 ViewController@implementation ConversationController- (void)viewDidLoad { [super viewDidLoad]; // TUIConversationListController_Minimalist TUIConversationListController_Minimalist *vc = [[TUIConversationListController_Minimalist alloc] init]; vc.delegate = self; // 把 TUIConversationListController_Minimalist 添加到自己的 ViewController [self addChildViewController:vc]; [self.view addSubview:vc.view];}
- (void)conversationListController:(TUIConversationListController_Minimalist *)conversationController didSelectConversation:(TUIConversationCell *)conversation{ // 会话列表点击事件,通常是打开聊天界面}@end
步骤3:构建聊天窗口
初始化聊天界面时,需要上层传入当前聊天界面对应的会话信息。示例代码如下所示:经典版简约版
#import "TUIC2CChatViewController.h"
// ChatViewController 为您自己的 ViewController@implementation ChatViewController- (void)viewDidLoad { // 创建会话信息 TUIChatConversationModel *data = [[TUIChatConversationModel alloc] init]; data.userID = @"userID"; // TUIC2CChatViewController TUIC2CChatViewController *vc = [[TUIC2CChatViewController alloc] init]; [vc setConversationData:data]; // 把 TUIC2CChatViewController 添加到自己的 ViewController [self addChildViewController:vc]; [self.view addSubview:vc.view];}@end
说明TUIC2CChatViewController
会自动拉取该用户的历史消息并展示出来。
#import "TUIC2CChatViewController_Minimalist.h"
// ChatViewController 为您自己的 ViewController@implementation ChatViewController- (void)viewDidLoad { // 创建会话信息 TUIChatConversationModel *data = [[TUIChatConversationModel alloc] init]; data.userID = @"userID"; // 创建 TUIC2CChatViewController_Minimalist TUIC2CChatViewController_Minimalist *vc = [[TUIC2CChatViewController_Minimalist alloc] init]; [vc setConversationData:data]; // 把 TUIC2CChatViewController 添加到自己的 ViewController [self addChildViewController:vc]; [self.view addSubview:vc.view];}@end
说明TUIC2CChatViewController_Minimalist
会自动拉取该用户的历史消息并展示出来。
步骤4:构建通讯录界面
通讯录界面不需要其它依赖,只需创建对象并显示出来即可。经典版简约版
#import "TUIContactController.h"
// ContactController 为您自己的 ViewController@implementation ContactController- (void)viewDidLoad { // 创建 TUIContactController TUIContactController *vc = [[TUIContactController alloc] init]; // 把 TUIContactController 添加到自己的 ViewController [self addChildViewController:vc]; [self.view addSubview:vc.view];}@end
注意,上面代码只能将 TUIContactController
初始化并展示出来,其中的点击行为(例如点击好友、添加好友等),TUIKit 会通过 TUIContactControllerListener
抛给上层处理:
@protocol TUIContactControllerListener @optional- (void)onSelectFriend:(TUICommonContactCell *)cell;- (void)onAddNewFriend:(TUICommonTableViewCell *)cell;- (void)onGroupConversation:(TUICommonTableViewCell *)cell;@end
#import "TUIContactController_Minimalist.h"
// ContactController 为您自己的 ViewController@implementation ContactController- (void)viewDidLoad { // 创建 TUIContactController_Minimalist TUIContactController_Minimalist *vc = [[TUIContactController_Minimalist alloc] init]; // 把 TUIContactController_Minimalist 添加到自己的 ViewController [self addChildViewController:vc]; [self.view addSubview:vc.view];}@end
注意,上面代码只能将 TUIContactController_Minimalist
初始化并展示出来,其中的点击行为(例如点击好友、添加好友等),TUIKit 会通过 TUIContactControllerListener_Minimalist
抛给上层处理:
@protocol TUIContactControllerListener_Minimalist @optional- (void)onSelectFriend:(TUICommonContactCell *)cell;- (void)onAddNewFriend:(TUICommonTableViewCell *)cell;- (void)onGroupConversation:(TUICommonTableViewCell *)cell;@end
例如,点击好友后,您可以将好友信息页展示出来:经典版简约版
#import "TUIFriendProfileController.h"
- (void)onSelectFriend:(TUICommonContactCell *)cell{ TUICommonContactCellData *data = cell.contactData; // 创建好友资料 vc TUIFriendProfileController *vc = [[TUIFriendProfileController alloc] init]; vc.friendProfile = data.friendProfile; // 展示好友资料 vc [self.navigationController pushViewController:(UIViewController *)vc animated:YES];}
#import "TUIFriendProfileController_Minimalist.h"
- (void)onSelectFriend:(TUICommonContactCell *)cell{ TUICommonContactCellData *data = cell.contactData; // 创建好友资料 vc TUIFriendProfileController_Minimalist *vc = [[TUIFriendProfileController_Minimalist alloc] init]; vc.friendProfile = data.friendProfile; // 展示好友资料 vc [self.navigationController pushViewController:(UIViewController *)vc animated:YES];}
说明 您可以 下载 TUIKitDemo 源码,查看更多的通讯录事件实现。
步骤5:构建音视频通话功能
TUI 组件支持在聊天界面对用户发起音视频通话,仅需要简单几步就可以快速集成:
视频通话 | 语音通话 |
![]() |
![]() |
1. 开通音视频服务。2. 登录 即时通信 IM 控制台 ,单击目标应用卡片,进入应用的基础配置页面。3. 在开通腾讯实时音视频服务功能区,单击免费体验即可开通 TUICallKit 的 7 天免费试用服务。4. 在弹出的开通实时音视频 TRTC 服务对话框中,单击确认,系统将为您在 实时音视频控制台 创建一个与当前 IM 应用相同 SDKAppID 的实时音视频应用,二者账号与鉴权可复用。5. 集成 TUICallKit 组件。
在 podfile 文件中添加以下内容。
// 集成音视频通话组件pod 'TUICallKit'
6. 发起和接收视频或语音通话。
消息页发起通话 | 联系人页发起通话 |
![]() |
![]() |
集成 TUICallKit 组件后,聊天界面和联系人资料界面默认会出现 “视频通话” 和 “语音通话” 两个按钮,当用户点击按钮时,TUIKit 会自动展示通话邀请 UI,并给对方发起通话邀请请求。当用户在线收到通话邀请时,TUIKit 会自动展示通话接收 UI,用户可以选择同意或者拒绝通话。当用户离线收到通话邀请时,如需唤起 App 通话,就要使用到离线推送能力,离线推送的实现请参见 添加离线推送。7. 添加离线推送。
在使用离线推送之前,您需要开通 IM 离线推送 服务。
关于 App 的配置,您可以参考文档:集成 TUIOfflinePush 跑通离线推送功能。说明配置完成后,当单击接收到的音视频通话离线推送通知时, TUICallKit 会自动拉起音视频通话邀请界面。8. 附加增值能力
集成 TUIChat 和 TUICallkit 的组件后,在聊天界面发送语音消息时,即可录制带 AI 降噪和自动增益的语音消息。该功能需要购买 音视频通话能力 进阶版及以上套餐,仅 IMSDK 7.0 及以上版本支持。当套餐过期后,录制语音消息会切换到系统 API 进行录音。
下面是使用两台华为 P10同时录制的语音消息对比:
第三方库依赖
TUIKit 依赖的第三方库的最低版本如下,如果您的版本较低,请升级到最新版本。
- Masonry (1.1.0)- MJExtension (3.4.1)- MJRefresh (3.7.5)- ReactiveObjC (3.1.1)- SDWebImage (5.15.8): - SDWebImage/Core (= 5.15.8)- SDWebImage/Core (5.15.8)- SnapKit (5.6.0)- SSZipArchive (2.4.3)
常见问题
TUICallKit 和自己集成的音视频库冲突了?
腾讯云的 音视频库 不能同时集成,会有符号冲突,如果您使用了非 TRTC 版本的音视频库,建议先去掉,然后 pod 集成 TUICallKit/Professional
版本,该版本依赖的 LiteAV_Professional 音视频库包含了音视频的所有基础能力。如果您使用了 LiteAV_Enterprise 音视频库,暂不支持和 TUICallKit 共存。具体解决方案可以参考文档:音视频常见问题。
通话邀请的超时时间默认是多久?
通话邀请的默认超时时间是 30 秒。
在邀请超时时间内,被邀请者如果离线再上线,能否立即收到邀请?
如果是单聊通话邀请,被邀请者离线再上线可以收到通话邀请,TUIKit 内部会自动唤起通话邀请界面。如果是群聊通话邀请,被邀请者离线再上线后会自动拉取最近 30 秒内的邀请,TUIKit 会自动唤起群通话界面。
对即时通讯IM解决方案有疑惑?想了解解决方案收费? 联系解决方案专家
腾讯云限时活动1折起,即将结束: 马上收藏
同尘科技为腾讯云授权服务中心,购买腾讯云享受折上折,更有现金返利:同意关联,立享优惠
阿里云解决方案也看看?: 点击对比阿里云的解决方案
暂无评论,你要说点什么吗?