iOS
Overview
Live Chat feature supports the following functions: sending barrage messages, inserting custom messages, and custom message styles. Live Chat messages support emoji input, adding fun to the messages and making the interaction more enjoyable.
Display barrage | Send barrage |
Note:
Support switching between system keyboard and emoji keyboard.
Integration
The barrage component mainly provides two Objects:
TUIBarrageButton
:Clicking it can bring up the input interface.TUIBarrageDisplayView
:Used for displaying barrage messages.In scenarios where barrage messages need to be sent, create a
TUIBarrageButton
, which can bring up the input interface when clicked:let barrageButton: TUIBarrageButton = TUIBarrageButton(roomId: xxx)view.addSubview(barrageButton)// layout barrageButton
In scenarios where barrage messages need to be displayed, use
TUIBarrageDisplayView
to show the barrage messages:let barrageDisplayView: TUIBarrageDisplayView = TUIBarrageDisplayView(roomId: xxx) view.addSubview(barrageDisplayView)// layout barrageDisplayView
Customize message style
Implement the
createCustomCell
delegate function in the TUIBarrageDisplayViewDelegate
of TUIBarrageDisplayView
, which is used to customize the barrage message style.barrageDisplayView.delegate = selfextension UIViewController: TUIBarrageDisplayViewDelegate {func barrageDisplayView(_ barrageDisplayView: TUIBarrageDisplayView, createCustomCell barrage: TUIBarrage) -> UIView? {// Return custom barrage UI here.}}
Note:
When displaying messages,
TUIBarrageDisplayView
will first call the delegate function barrageDisplayView:createCustomCell
to obtain the user's custom style for a specific barrage message. If it returns nil, the default barrage style of TUIBarrageDisplayView will be used.InsertCustomMessage
The barrage display component
TUIBarrageDisplayView
provides the external interface method insertBarrages
for inserting custom messages (in batches). Custom messages are usually used in combination with custom styles to achieve different display effects.// Example: Insert a gift message in the barrage area.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 barrage.extInfo["xxx"] = "xxx" barrageDisplayView.insertBarrages(barrage);
Note:
The
extInfo
of TUIBarrage
is a Map, used for storing custom data.