# Rtc-Chat-Web

**Repository Path**: tencent-cloud-uikit/rtc-chat-web

## Basic Information

- **Project Name**: Rtc-Chat-Web
- **Description**: 这是一款基于腾讯云 Chat SDK 的 Web UI 组件库，它提供了一些通用的 UI 组件，包含会话、聊天、群组等功能。
- **Primary Language**: TypeScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-07-08
- **Last Updated**: 2026-07-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Chat UIKit Demo

基于腾讯云 IM Chat UIKit 的即时通信示例项目，覆盖 Vue 3 和 React 两个技术栈、PC 和 H5 两个平台。

## 项目结构

```
├── chat-desktop-vue3/   # PC 端 · Vue 3 + TypeScript
├── chat-mobile-vue3/    # H5 端 · Vue 3 + TypeScript
├── chat-desktop-react/  # PC 端 · React + TypeScript
└── chat-mobile-react/   # H5 端 · React + TypeScript
```

## 快速开始

### 环境要求

- **Node.js**：`^22.18.0` 或 `>=24.12.0`
- **包管理器**：npm（已提供 `package-lock.json`，建议使用 npm）

### 安装与运行

以 `chat-desktop-vue3` 为例：

```bash
cd chat-desktop-vue3
npm install
npm run dev
```

其他项目同理，进入对应目录执行相同命令即可。

### 获取登录凭据

每个 Demo 启动后是一个登录页，需要填写三项信息：

| 字段 | 说明 | 获取方式 |
|------|------|---------|
| **SDKAppID** | 应用的唯一标识 | [即时通信 IM 控制台](https://console.cloud.tencent.com/im) 创建应用后获取 |
| **UserID** | 用户 ID | 在控制台或通过 [REST API](https://cloud.tencent.com/document/product/269/1608) 创建 |
| **UserSig** | 用户签名 | 控制台「开发辅助工具」可生成测试签签名，生产环境需服务端生成 |

> 测试阶段可直接在 [IM 控制台](https://console.cloud.tencent.com/im/tool-usersig) 使用 UserSig 生成工具。

## 技术栈

| 项目 | 框架 | UI 库 | 语言切换 | 音视频通话 | 快速会议 |
|------|------|-------|---------|-----------|-----------|
| chat-desktop-vue3 | Vue 3 + Vite | chat-uikit-vue3 | ✅ 中 / 英 | ✅ | ✅ |
| chat-mobile-vue3 | Vue 3 + Vite | chat-uikit-vue3 | ✅ 中 / 英 | ✅ | ✅ |
| chat-desktop-react | React 19 + Vite | chat-uikit-react | ✅ 中 / 英 | ✅ | ❌ |
| chat-mobile-react | React 19 + Vite | chat-uikit-react | ✅ 中 / 英 | ✅ | ❌ |

## 免责声明

本项目为腾讯云 Chat UIKit 的**示例 Demo**，旨在提供一种集成参考，并非唯一或推荐的实现方案。项目中可能包含测试用的硬编码配置、简化实现，**不可直接用于生产环境**。在生产环境中请确保：

- UserSig 由服务端生成，不得在前端硬编码
- 遵循安全最佳实践，妥善管理 SDKAppID 等敏感信息
- 根据业务需求完善错误处理、权限控制等逻辑

## License

[Apache License 2.0](./LICENSE)