即时通信 IM 弹幕组件 (Web React)

一、组件构成

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

二、步骤1：环境配置及开通服务

在进行快速接入之前，你需要参考准备工作，满足相关环境配置及开通对应服务。

三、步骤2：安装依赖

npmpnpmyarnnpm install tuikit-atomicx-react @tencentcloud/uikit-base-component-react –savenpm install sass –save-devpnpm add tuikit-atomicx-react @tencentcloud/uikit-base-component-reactpnpm add sass –devyarn add tuikit-atomicx-react @tencentcloud/uikit-base-component-reactyarn add sass –dev

四、步骤3：集成弹幕组件

在你的项目中引入并使用直播弹幕组件，可直接复制如下示例代码到你的项目中，展示完整的直播间弹幕消息组件以及消息发送组件。

MessageList.tsxMessageList.module.scssimport 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	–	输入框失去焦点事件处理函数。

八、自定义示例

自定义样式和尺寸

// 消息列表<BarrageList className="custom-barrage-list-name" style={{backgroundColor: "#FFFFFF"}} containerStyle={{backgroundColor: "#999999"}} itemStyle={{backgroundColor: "#000000"}} height="200px" />// 消息输入<BarrageInput className="custom-barrage-input-name" autoFocus disabled={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> );};// 消息列表中，使用自定义消息组件<BarrageList Message={CustomMessage}/>

九、下一步

接入直播视频组件后，你可能还想继续接入礼物、观众列表等功能，可以参阅下表指引文档，继续接入这些功能。

功能	描述	集成指引
直播送礼组件	展示配置的礼物列表，支持发送礼物、礼物播放。	直播送礼组件 (Web React)
观众列表组件	展示当前直播间观众信息。	观众列表组件 (Web React)