即时通信 IM 观众列表组件 (iOS UIKit)

一、步骤1：开通服务

参考 开通服务 文档开通体验版或大规模直播版套餐。

二、步骤2：代码集成

参考 准备工作 完成 TUILiveKit 组件接入。

三、步骤3：集成观众列表组件

以主播开播的场景为例，将 AudienceListView 添加到你的主播视图控制器中，示例代码如下：

import TUILiveKitclass YourAnchorViewController: UIViewController { // 1. 定义观众列表组件 private let audienceListView = AudienceListView() private let liveId: String // … 其他代码 … public override func viewDidLoad() { super.viewDidLoad() // 2. 将组件添加到你的视图中并设置布局 view.addSubview(audienceListView) audienceListView.snp.remakeConstraints { make in make.centerY.equalTo(closeButton) make.trailing.equalTo(closeButton.snp.leading).offset(-8) make.leading.greaterThanOrEqualTo(liveInfoView.snp.trailing).offset(20) } // 3. 关联直播房间 id audienceListView.initialize(liveId: liveId) }}

四、自定义组件

观众列表组件提供了直播间内的观众点击回调接口，该回调支持你根据自己的业务需求实现直播间内的观众管理。

五、组件接口

public struct LiveUserInfo { public var userId: String // 观众用户 id public var userName: String // 观众用户昵称 public var avatarURL: String // 观众用户头像 public init()}

六、实现观众管理

默认情况下，点击观众列表中的用户会弹出管理弹框。你可以通过实现onUserManageButtonClicked 闭包，并通过 LiveAudienceStore 来执行具体操作，例如实现将用户踢出直播间的功能：

import UIKitimport TUILiveKitimport AtomicXCoreclass YourAnchorViewController: UIViewController { // 1. 定义观众列表组件和 Store private let audienceListView = AudienceListView() private lazy var liveAudienceStore = LiveAudienceStore.create(liveId: self.liveId) private let liveId: String public override func viewDidLoad() { super.viewDidLoad() // … 其他代码 … // 2. 为组件绑定自定义管理事件 audienceListView.onUserManageButtonClicked = { [weak self] userInfo in self?.showUserManagementAlert(for: userInfo) } } // 3. 实现自定义的用户管理弹框 private func showUserManagementAlert(for user: LiveUserInfo) { let alertController = UIAlertController(title: "观众管理", message: "你希望对 \\(user.userName) 做什么？", preferredStyle: .actionSheet) let kickOutAction = UIAlertAction(title: "踢出直播间", style: .destructive) { [weak self] _ in self?.kickOutUser(user) } let cancelAction = UIAlertAction(title: "取消", style: .cancel) alertController.addAction(kickOutAction) alertController.addAction(cancelAction) present(alertController, animated: true) } // 4. 调用 Store 方法将用户踢出 private func kickOutUser(_ user: LiveUserInfo) { liveAudienceStore.kickOutUser(user.userId) { print("Successfully kicked out \\(user.userName).") } onError: { error, message in print("Failed to kick out user, error: \\(message)") } }}