Docs Overview/
Chat/
UIKit/
Web/
Run Sample Demo/

Run Sample Demo

本文将介绍如何快速实现聊天功能演示。您将在10分钟内完成以下关键步骤，并最终获得一个具有全面用户界面的聊天功能。在此之前，您可以直接体验下方聊天功能或 体验沙箱 。


环境要求

Node.js version 16+
npm (use a version that matches the Node version in use)

跑通 demo

步骤1：下载源码

MacOS
Windows
# Run the code in CLI
git clone https://github.com/TencentCloud/chat-uikit-react
# Go to the project
cd chat-uikit-react/examples/sample-chat
# Install dependencies of the demo
npm install
# Run the code in CLI
git clone https://github.com/TencentCloud/chat-uikit-react
# Go to the project
cd chat-uikit-react/examples/sample-chat
# Install dependencies of the demo
npm install

步骤2：配置 demo

1. 打开examples/sample-chat项目，通过路径./examples/sample-chat/src/debug/GenerateTestUserSig.js找到GenerateTestUserSig.js文件。
2. 在GenerateTestUserSig.js文件中设置 SDKAPPID 和 SECRETKEY ，其值可以在 Chat Console 中获取。 点击目标应用卡片，进入其配置页面。


3. 将密钥信息复制并保存到 /examples/sample-chat/src/debug/GenerateTestUserSig.js 文件中。



注意：
本文提到的生成 UserSig 的方案是在客户端代码中配置 SECRETKEY，该方法中 SECRETKEY 很容易被反编译逆向破解，一旦您的密钥泄露，攻击者就可以盗用您的腾讯云流量，因此该方法仅适合本地跑通 Demo 和功能调试。
正确的 UserSig 签发方式是将 UserSig 的计算代码集成到您的服务端，并提供面向 App 的接口，在需要 UserSig 时由您的 App 向业务服务器发起请求获取动态 UserSig。更多详情请参见 服务端生成 UserSig。

步骤3：启动项目

# Launch the project
npm run start

步骤4：发送您的第一条消息

在输入框中输入您的消息，然后按 Enter 发送。




集成 chat-uikit-react

如果您想将 chat-uikit-react 集成到您的项目中，请跳转至 集成 chat-uikit-react。

交流与反馈

加入 Telegram 技术交流群组 或 WhatsApp 交流群，享有专业工程师的支持，解决您的难题。