专为 React 构建

React Chat SDK 与 UI Kit

使用 Tencent RTC 的 React Chat SDK 和 UI Kit 构建单聊和群聊。添加相互连接的会话列表、消息和消息编辑器，然后根据产品需求进行自定义。

开始 React 教程试用 Chat Demo

开发者资源

React Chat SDK 文档和示例

API 参考

探索 React Chat SDK API 以及 UI Kit 的 props 和 hooks。

ConversationList API MessageList API JavaScript 客户端 API

接入指南

将 React Chat SDK 和 UI Kit 集成到您的应用中。

集成 React Chat 添加独立聊天

示例与源码

探索 React Chat SDK 源代码和本地商品消息示例。

React 官方示例商品消息示例

React 社区聊天

创建社区聊天使用 React Chat SDK：支持单聊、群聊和共享媒体。

试用 Chat Demo 查看 React 源代码

自定义产品消息

将 React Chat SDK 自定义消息连接到您的产品卡片中：客服聊天.

获取 React 示例

REACT 聊天功能

React Chat SDK 功能

从消息操作到自定义内容，按应用需求选择所需功能。

按需扩展

已读回执：启用和配置
Cloud Search：付费插件
语音和视频：添加 TUICallKit

探索 React Chat Components

探索从会话列表到消息编辑器的完整界面。

对话列表

契合您产品的收件箱

显示最近消息和未读数量。替换预览组件即可更改每个对话的显示方式。

ConversationList API

<ConversationList
  style={{ width: 300, height: '100%' }}
  enableSearch={false}
/>

MessageList

选择消息的交互方式

控制消息对齐方式，将连续消息分组，并选择每条消息可执行的操作。

MessageList API

const actions = useMessageActions([
  'copy', 'quote', 'forward',
]);

<MessageList
  alignment="two-sided"
  messageAggregationTime={300}
  messageActionList={actions}
/>

MessageInput

构建所需的消息编辑器

选择图片、文件和视频选择器。设置占位文本，并决定是否显示发送按钮。

MessageInput API

<MessageInput
  placeholder="Message your community"
  autoFocus={false}
  hideSendButton={false}
  actions={[
    'ImagePicker', 'FilePicker', 'VideoPicker',
  ]}
/>

ChatHeader

将实用操作置于触手可及之处

在会话标题旁添加设置控件，并将其连接到您自己的面板或导航。

页头集成指南

const [showSettings, setShowSettings] = useState(false);

<ChatHeader
  ChatHeaderRight={
    <button onClick={() => setShowSettings(true)}>
      Settings
    </button>
  }
/>

联系人

连接用户与会话

结合联系人列表和个人资料详情。当用户开始发送消息时，切换回会话视图。

联系人集成指南

<ContactList />
<ContactInfo
  onSendMessage={() => setActiveTab('conversations')}
  onEnterGroup={() => setActiveTab('conversations')}
/>

ChatSetting

为会话设置留出空间

将设置组件放在侧边栏或抽屉中。面板何时打开和关闭由您的应用控制。

集成设置指南

{showSettings && (
  <aside className="chat-settings">
    <ChatSetting
      onClose={() => setShowSettings(false)}
    />
  </aside>
)}

个性化定制

自定义你的 React 聊天 UI

根据您的 React Chat SDK 集成和自有内容定制 UI Kit 样式。

主题

在 provider 中设置主题。在浅色和深色外观之间切换时，保持同一套会话流程。

主题集成指南

开始使用

集成 React Chat SDK

01
创建您的应用
创建一个 Chat 应用，用于集成 React Chat SDK。
打开 Chat 控制台
02
添加 React UI Kit
安装软件包。根据您的需求自定义组件。
按照 React 教程操作
03
发送你的第一条消息
登录两个 React Chat SDK 用户账号并发送一条测试消息。
连接您的用户

React 聊天 UI 套件

终端

npm install @tencentcloud/chat-uikit-react

<UIKitProvider theme="light">
  <ConversationList />
  <Chat>
    <ChatHeader />
    <MessageList />
    <MessageInput />
  </Chat>
</UIKitProvider>

CHAT + CALL

有些对话需要通话

通过 TUICallKit 和 React 聊天页眉接入语音和视频。

通话功能需要集成 TUICallKit 并启用 Call 服务。Call 和 Chat 的价格需分别查看。

查看通话集成

React Chat SDK 常见问题

React Chat SDK 与 React UI Kit 有何区别？

React Chat SDK 通过 JavaScript SDK 提供消息功能。React UI Kit 为聊天界面提供现成组件。您可以使用 UI Kit 快速接入已连接的组件，也可以围绕底层 SDK 构建自己的界面。

探索 React UI Kit 探索 JavaScript SDK

可以自定义组件和消息布局吗？

可以。使用文档中说明的 props 和扩展点配置组件行为、调整会话预览并渲染自定义消息。可进行的更改取决于具体组件；规划替换方案前，请先查看其 API。

查看 MessageList 选项构建自定义消息

React Web、移动 Web 或 React Native 应使用哪个 UI Kit？

浏览器应用请使用 React UI Kit。移动 Web（H5）指南使用 React 包中的 ConversationListH5 和 MessageListH5 等组件。对于使用 React Native 构建的原生 iOS 和 Android 应用，请使用独立的 React Native UI Kit 及其原生设置指南。

React Web 集成 React 移动 Web 指南探索 React Native UI Kit React Native 设置

如何将 React Chat SDK 与 Next.js 或 SSR 集成？

规划浏览器中的交互式聊天界面。在 Next.js App Router 中，将依赖浏览器的代码隔离在 Client Component 中；Next.js 支持使用 ssr: false 进行仅客户端动态加载。在服务器上生成 UserSig。检查已安装的 UI Kit 版本和依赖项，并在发布前测试生产构建、登录和导航。

Next.js 仅客户端加载 React 集成要求

开源 React UI Kit 与托管 Chat 服务之间有何关系？

React UI Kit 源代码可在 GitHub 上获取。其联网消息组件使用 Tencent RTC Chat，需要 Chat 应用和已通过身份验证的用户。提供组件源代码并不意味着可无限使用托管消息服务：服务用量和功能访问权限取决于您的 Chat 套餐。无需实时连接即可运行本地 UI 预览。

React UI Kit 源代码 Chat 套餐详情估算服务成本

我可以免费开始使用 React Chat SDK 吗？

Tencent RTC Chat 提供包含 1,000 名月活跃用户的免费套餐。请查看套餐详情和定价，以确认您所需功能和用量对应的方案。

查看 Free Plan 估算费用

React UI Kit 是否包含语音和视频通话？

您可以通过集成 TUICallKit 并启用 Call 服务来添加通话功能。当前完整的 React 集成示例包含此扩展；通话配置和定价仍与消息服务分开。

查看通话集成

免费套餐是否包含 Cloud Search？

Cloud Search 是一项增值功能，需要 Cloud Search 插件。请在聊天界面中启用搜索前查看相关要求。

阅读 React 集成指南

如何将 React 聊天 SDK 集成到 React 项目中？

初始化文档所述的 provider 并组合已连接的组件。让订阅及清理操作与 React 生命周期一致，再在实际应用中测试导航和重复挂载。

发布应用前如何测试 React 聊天 SDK？

检查登录、SDK 就绪、发送与接收事件，以及重连后的消息状态。

如何定制 React 聊天 SDK 的界面？

用 UIKitProvider 包裹聊天组件，并设置 theme="light" 或 theme="dark"。子组件可以使用 useUIKit().setTheme 切换外观；该 hook 必须在 provider 的上下文中调用。展示商品卡片时，可通过 MessageList.messageRenderers 提供自定义消息渲染器。请为无法识别的消息载荷保留兜底显示，并由应用自行处理商品查询和结账，这些不属于 Chat 自带的功能。

查看定制指南

为下一步找到合适的支持

技术问题

查看 React Chat SDK 示例，或报告可复现的问题。

查看 GitHub Issues

产品和定价问题

与我们的团队沟通您的应用、预期用量和集成需求。

联系销售人员

你的下一次对话从这里开始

使用 React Chat SDK 和 UI Kit 构建。免费开始，每月活跃用户额度为 1,000。

免费开始开始 React 教程