文档反馈官招募中，报名立赚积分兑换代金券！> HOT
文档中心>实时音视频>直播与语聊房（含 UI）>UI 自定义>弹幕消息组件>聊天弹幕组件 (iOS UIKit)

聊天弹幕组件 (iOS UIKit)

最近更新时间：2025-10-15 20:20:11

我的收藏

本页目录：

功能预览

TUILiveKit 直播弹幕为直播场景提供完整互动解决方案，能够增强直播的互动性和趣味性。通过本文档，您可快速实现直播间弹幕互动功能，并支持深度定制以满足业务需求。
弹幕消息发送组件（BarrageInputView）
弹幕消息展示组件（BarrageStreamView）





组件构成

组件名称
具体内容
弹幕消息组件（BarrageStreamView）
负责实时展示和管理弹幕消息流的组件，提供消息列表渲染、时间聚合、用户交互和响应式适配等完整的消息展示解决方案。
消息发送组件（BarrageInputView）
提供富文本编辑和消息发送功能的输入组件，集成表情选择器、字符限制、状态管理和跨平台适配，为用户提供流畅的消息输入体验。

快速开始

步骤 1. 开通服务

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

步骤 2. 代码集成

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

步骤 3. 接入弹幕消息发送组件

在您的应用中接入弹幕消息发送组件，使主播/观众能够方便地发送弹幕消息。请参考示例代码创建 BarrageInputView 组件并添加到您的视图
Swift
// 1. 创建 BarrageInputView 对象
let barrageInputView = BarrageInputView(roomId: roomId)
// ...此处将barrageInputView添加到您的父视图上并调整布局


步骤 4. 接入弹幕消息展示组件

在需要展示弹幕的位置，创建并初始化 BarrageStreamView 来展示弹幕消息。ownerId 用于区分房主和观众的显示效果。
Swift
// 1. 创建 BarrageStreamView 对象
let barrageDisplayView = BarrageStreamView(roomId: roomId)

// 2. 此处将barrageInputView添加到您的父视图上并调整布局
barrageDisplayView.setOwnerId(ownerId)
说明：
1. 弹幕消息发送组件支持系统键盘和表情键盘切换。
2. 为尊重表情设计版权，TUILiveKit 工程中不包含大表情元素切图，正式上线商用前请您替换为自己设计或拥有版权的其他表情包。下图所示默认的小黄脸表情包版权归腾讯云所有，可有偿授权使用，如果需要获得授权可 提交工单 联系我们。




步骤 5. 插入本地弹幕消息

BarrageStreamView 提供了 insertBarrages 接口，用于插入自定义消息（如礼物消息、直播间公告等）。您可以通过自定义样式实现不同的展示效果。
说明：
此操作必须在进房成功的回调中执行。
Swift
import RTCCommon

// 示例1：在弹幕区插入一条礼物消息
let barrage = TUIBarrage()
barrage.content = "gift"
barrage.user.userId = "sender.userId"
barrage.user.userName = "sender.userName"
barrage.user.avatarUrl = "sender.avatarUrl"
barrage.user.level = "sender.level"

let giftCount = 1
barrage.extInfo["TYPE"] = AnyCodable("GIFTMESSAGE")
barrage.extInfo["gift_name"] = AnyCodable("gift.giftName")
barrage.extInfo["gift_count"] = AnyCodable(giftCount)
barrage.extInfo["gift_icon_url"] = AnyCodable("gift.imageUrl")
barrage.extInfo["gift_receiver_username"] = AnyCodable("receiver.userName")

barrageDisplayView.insertBarrages([barrage])

自定义组件

自定义弹幕消息样式

弹幕消息样式默认有两种：普通弹幕（样式为 0）和自定义消息样式。如果您需要更多样式，可实现 BarrageStreamView 的代理方法 BarrageStreamViewDelegate。
Swift
class MyViewController: BarrageStreamViewDelegate {
    let barrageDisplayView = BarrageStreamView(roomId: roomId)

    override func viewDidLoad() {
        super.viewDidLoad()
        barrageDisplayView.delegate = self  // 设置BarrageStreamView的代理
        
        // ...
    }


    func onBarrageClicked(user: TUIUserInfo) {
        // 此处您可添加弹幕消息点击事件处理逻辑，user为消息发送者信息
    }
    
    func barrageDisplayView(_ barrageDisplayView: BarrageStreamView, createCustomCell barrage: TUIBarrage) -> UIView? {
        // 是否需要使用自定义UI，如不需要返回 nil 即可
        guard let type = barrage.extInfo["TYPE"], type.value as? String == "GIFTMESSAGE" else {
            return nil
        }
        
        // 返回自定义消息样式UI（礼物回显）
        return CustomBarrageView(barrage: barrage)
    }
}


// 自定义UI
class 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，并且传递了正确的 roomId。
检查网络连接是否正常。

如何在弹幕消息中区分房主和观众？

在初始化 BarrageStreamView 时，您需要传入 ownerId 参数。组件会根据 ownerId 自动识别房主发送的弹幕，并应用不同的样式。您也可以通过自定义弹幕样式，根据 Barrage 消息中的 user.userId 字段来判断是否为房主，并显示您想要的特定效果。
中国站
目录