产品动态
产品近期公告
关于 TRTC Live 正式上线的公告
关于TRTC Conference 正式版上线的公告
Conference 商业化版本即将推出
关于多人音视频 Conference 开启内测公告
关于音视频通话 Call 正式版上线的公告
关于腾讯云音视频终端 SDK 播放升级及新增授权校验的公告
关于 TRTC 应用订阅套餐服务上线的相关说明
聊天弹幕组件（Web React 桌面浏览器）
本文对弹幕组件进行了详细的介绍，其中包含弹幕消息组件（BarrageList）和消息发送组件（BarrageInput）。您可以在已有项目中直接参考本文示例集成我们开发好的整体组件，也可以根据您的需求按照文档中的组件自定义部分对样式和布局进行深度的定制。
组件构成
组件名称 | 具体内容 |
弹幕消息组件（BarrageList） | 负责实时展示和管理弹幕消息流的组件，提供消息列表渲染、时间聚合、用户交互和响应式适配等完整的消息展示解决方案。 |
消息发送组件（BarrageInput） | 提供富文本编辑和消息发送功能的输入组件，集成表情选择器、字符限制、状态管理和跨平台适配，为用户提供流畅的消息输入体验。 |
组件接入
步骤1：环境配置及开通服务
步骤2：安装依赖
npm install tuikit-atomicx-react @tencentcloud/uikit-base-component-react --savenpm install sass --save-dev
pnpm add tuikit-atomicx-react @tencentcloud/uikit-base-component-reactpnpm add sass --dev
yarn add tuikit-atomicx-react @tencentcloud/uikit-base-component-reactyarn add sass --dev
步骤3：集成弹幕组件
在您的项目中引入并使用直播弹幕组件，可直接复制如下示例代码到您的项目中，展示完整的直播间弹幕消息组件以及消息发送组件。
import React from "react";import { useUIKit } from "@tencentcloud/uikit-base-component-react";import { BarrageList, BarrageInput } from "tuikit-atomicx-react";import styles from "./MessageList.module.scss";const MessageList: React.FC = () => {const { t } = useUIKit();return (<div className={styles.livePlayer__messageList}><div className={styles.livePlayer__messageListTitle}><span>{t('live_player_view.message_list_title')}</span></div><div className={styles.livePlayer__messageListContent}><BarrageList /><BarrageInput /></div></div>);};export default MessageList;
.livePlayer__messageList {display: flex;flex-direction: column;flex: 1 0 auto;margin-top: 8px;padding: 8px;background: var(--uikit-bg-color-operate);.livePlayer__messageListTitle {padding: 12px 0;border-bottom: 1px solid var(--uikit-stroke-color-primary);@include text-size-16;}.livePlayer__messageListContent {display: flex;flex: 1;flex-direction: column;}}
自定义组件
弹幕消息组件和消息发送组件提供了丰富的 Props 属性，用于功能和 UI 展示设置。
弹幕消息组件（BarrageList）
Props 属性名 | 参数类型 | 默认值 | 说明 |
Message | Component | IBarrageMessageComponentProps | 自定义消息组件。 |
containerStyle | CSSProperties | - | 自定义消息列表容器样式。 |
itemStyle | CSSProperties | - | 自定义单条消息项样式。 |
height | String | - | 组件高度，支持 CSS 单位。 |
style | CSSProperties | - | 指定根元素样式的自定义样式。 |
className | String | - | 设置在组件根 DOM 节点上的自定义样式类名。 |
消息发送组件（BarrageInput）
Props 属性名 | 类型 | 默认值 | 说明 |
containerClass | String | '' | 自定义容器的 CSS 类名。 |
containerStyle | CSSProperties | {} | 自定义容器的内联样式。 |
width | String | - | 组件宽度，支持 CSS 单位。 |
height | String | - | 组件高度，支持 CSS 单位。 |
minHeight | String | '40px' | 组件最小高度，支持 CSS 单位。 |
maxHeight | String | '140px' | 组件最大高度，支持 CSS 单位。 |
placeholder | String | - | 输入框占位符文本。 |
disabled | Boolean | false | 是否禁用输入框。 |
autoFocus | Boolean | true | 是否自动聚焦到输入框。 |
maxLength | Number | 80 | 输入内容的最大字符数限制。 |
onFocus | () => void | - | 输入框获得焦点事件处理函数。 |
onBlur | () => void | - | 输入框失去焦点事件处理函数。 |
自定义示例
自定义样式和尺寸
// 消息列表<BarrageListclassName="custom-barrage-list-name"style={{backgroundColor: "#FFFFFF"}}containerStyle={{backgroundColor: "#999999"}}itemStyle={{backgroundColor: "#000000"}}height="200px" />// 消息输入<BarrageInputclassName="custom-barrage-input-name"autoFocusdisabled={false}width="100%"height="100px"placeholder="请输入弹幕"/>
自定义消息
import React from 'react';import { BarrageList } from 'tuikit-atomicx-react';import type { Barrage } from 'tuikit-atomicx-react';interface ICustomMessageComponentProps {message: Barrage;isLastInChunk?: boolean;style?: React.CSSProperties;}const CustomMessage: React.FC<ICustomMessageComponentProps> = ({ message }) => {return (<div className="my-message-item">{message.sender.userName}: {message.textContent}</div>);};// 消息列表中，使用自定义消息组件<BarrageListMessage={CustomMessage}/>
下一步
接入直播视频组件后，您可能还想继续接入直播送礼、观众列表等功能，可以参阅下表指引文档，继续接入这些功能。
功能 | 描述 | 集成指引 |
直播送礼组件 | 展示配置的礼物列表，支持发送礼物、礼物播放。 | |
观众列表组件 | 展示当前直播间观众信息。 |
文档反馈