一、功能预览
| 弹幕消息发送组件（BarrageInputView） | 弹幕消息展示组件（BarrageStreamView） |
| | |
二、组件构成
| 组件名称 | 具体内容 |
| 弹幕消息组件（BarrageStreamView） | 负责实时展示和管理弹幕消息流的组件，提供消息列表渲染、时间聚合、用户交互和响应式适配等完整的消息展示解决方案。 |
| 消息发送组件（BarrageInputView） | 提供富文本编辑和消息发送功能的输入组件，集成表情选择器、字符限制、状态管理和跨平台适配，为用户提供流畅的消息输入体验。 |
三、步骤1：开通服务
参考 开通服务 文档开通体验版或大规模直播版套餐。
四、步骤2：代码集成
参考 准备工作 完成 TUILiveKit 组件接入。
五、步骤3：接入弹幕消息发送组件
在你的应用中接入弹幕消息发送组件，使主播/观众能够方便地发送弹幕消息。请参考示例代码创建 BarrageInputView 组件并添加到你的视图
Swift// 1. 创建 BarrageInputView 对象let barrageInputView = BarrageInputView(roomId: roomId)// …此处将barrageInputView添加到你的父视图上并调整布局
注意：说明：
注意：1. 弹幕消息发送组件支持系统键盘和表情键盘切换。
注意：2. 为尊重表情设计版权，TUILiveKit 工程中不包含大表情元素切图，正式上线商用前请你替换为自己设计或拥有版权的其他表情包。下图所示默认的小黄脸表情包版权归腾讯云所有，可有偿授权使用，如果需要获得授权可 提交工单 联系我们。
注意：
六、步骤4：接入弹幕消息展示组件
在需要展示弹幕的位置，创建并初始化 BarrageStreamView 来展示弹幕消息。ownerId 用于区分房主和观众的显示效果。
Swift// 1. 创建 BarrageStreamView 对象let barrageDisplayView = BarrageStreamView(roomId: roomId)// 2. 此处将barrageInputView添加到你的父视图上并调整布局barrageDisplayView.setOwnerId(ownerId)
七、步骤5：插入本地弹幕消息
BarrageStreamView 提供了 insertBarrages 接口，用于插入自定义消息（例如礼物消息、直播间公告等）。你可以通过自定义样式实现不同的展示效果。
注意：说明：
注意：此操作必须在进房成功后执行。
Swiftimport TUILiveKit// 示例：在弹幕区插入一条礼物消息let barrage = Barrage()barrage.textContent = "gift"barrage.sender.userId = "sender.userId"barrage.sender.userName = "sender.userName"barrage.sender.avatarUrl = "sender.avatarUrl"barrage.sender.level = "sender.level"let giftCount = 1barrage.extensionInfo = [ "TYPE": "GIFTMESSAGE", "gift_name": gift.name, "gift_count": "\\(giftCount)", "gift_icon_url": gift.iconURL, "gift_receiver_username": userName]barrageDisplayView.insertBarrages([barrage])
八、效果示例
弹幕消息样式默认有两种：普通弹幕（样式为 0）和自定义消息样式。如果你需要更多样式，可实现 BarrageStreamView 的代理方法 BarrageStreamViewDelegate。
Swiftclass MyViewController: BarrageStreamViewDelegate { let barrageDisplayView = BarrageStreamView(roomId: roomId) override func viewDidLoad() { super.viewDidLoad() barrageDisplayView.delegate = self // 设置BarrageStreamView的代理 // … } func onBarrageClicked(user: LiveUserInfo) { // 此处你可添加弹幕消息点击事件处理逻辑，user为消息发送者信息 } func barrageDisplayView(_ barrageDisplayView: BarrageStreamView, createCustomCell barrage: Barrage) -> UIView? { guard let type = barrage.extensionInfo?["TYPE"], type == "GIFTMESSAGE" else { // 是否需要使用自定义UI，如不需要返回 nil 即可 return nil // 如果需要，也可以根据消息类型返回特定的样式 // return GiftBarrageView(barrage: barrage) } // 返回自定义消息样式UI return CustomBarrageView(barrage: barrage) }}// 自定义UIclass CustomBarrageView: UIView { let barrage: TUIBarrage init(barrage: TUIBarrage) { self.barrage = barrage super.init(frame: .zero) } required init?(coder: NSCoder) { fatalError("init(coder:) has not been implemented") } // …此处布局与绘制你自己的UI}
九、为什么我无法看到弹幕消息？
请检查以下几点：
·确保你已经正确初始化了 BarrageInputView 和 BarrageStreamView，并且传递了正确的 LiveID。
·检查网络连接是否正常。
十、如何在弹幕消息中区分房主和观众？
在初始化 BarrageStreamView 时，你需要传入 ownerId 参数。组件会根据 ownerId 自动识别房主发送的弹幕，并应用不同的样式。你也可以通过自定义弹幕样式，根据 Barrage 消息中的 user.userId 字段来判断是否为房主，并显示你想要的特定效果。