# XuqmGroup RN Chat Demo

> 文档版本：V2.0 · 更新日期：2026-04-24

这个演示项目用于验证 `@xuqm/rn-sdk` 的三条核心能力：

1. **IM 聊天**：单聊消息发送与接收，覆盖全部 12 种消息类型，支持消息撤回
2. **App 整包更新**：`update-service` 版本检查
3. **RN 插件热更新**：热更新包检查、下载与本地缓存

---

## 当前配置

| 配置项 | 值 |
|--------|-----|
| API 域名 | `https://sentry.xuqinmin.com` |
| IM WebSocket | `wss://sentry.xuqinmin.com/ws/im` |
| 演示 AppId | `ak_demo_chat` |
| 演示用户 | `demo_alice`、`demo_bob` |
| 演示模块 | `chat-home` |
| 本地 App 版本号 | `1`（写死，便于触发更新） |
| 本地插件版本 | `1.0.0`（写死，便于触发热更新） |

---

## 项目结构

```
XuqmGroup-RNChatDemo/
├── App.tsx                       # 主入口，包含全部 Demo 逻辑
├── src/
│   └── components/
│       ├── MessageBubble.tsx     # 消息气泡，支持所有消息类型渲染
│       └── MessageComposer.tsx   # 消息类型选择器 + 内容编辑区
├── demo-assets/                  # 演示用 APK 和 RN Bundle
└── scripts/
    └── publish-demo-assets.sh    # 一键发布演示版本数据到服务端
```

---

## 支持的消息类型

| 消息类型 | 说明 | 演示内容 |
|----------|------|----------|
| `TEXT` | 纯文本 | 普通文字 |
| `IMAGE` | 图片 | URL + 尺寸信息，picsum 示例图 |
| `VIDEO` | 视频 | URL + 时长 + 文件大小 |
| `AUDIO` | 语音 | URL + 时长 |
| `FILE` | 文件 | URL + 文件名 + 大小 |
| `CUSTOM` | 自定义 | 自定义卡片（任意 JSON） |
| `LOCATION` | 位置 | 经纬度 + 地址（天安门广场） |
| `NOTIFY` | 系统通知 | 标题 + 内容 |
| `RICH_TEXT` | 富文本 | HTML 内容 |
| `CALL_AUDIO` | 语音通话信令 | callId + 通话动作 |
| `CALL_VIDEO` | 视频通话信令 | callId + 通话动作 |
| `FORWARD` | 转发消息 | 原消息 ID + 原始内容 |
| `REVOKED` | 已撤回 | 服务端下发，气泡显示"已撤回" |

非文本消息的 `content` 字段均为 JSON 字符串。

---

## 运行

```bash
cd XuqmGroup-RNChatDemo
npm install
npm run start        # Metro bundler
npm run android      # Android 真机/模拟器
npm run ios          # iOS 模拟器
```

---

## 演示步骤

### IM 聊天演示

1. App 启动后自动以 `Alice` 登录并拉取与 `Bob` 的历史消息
2. 在消息类型选择器中点击不同类型（TEXT / IMAGE / VIDEO 等）
3. 内容区会自动填入该类型的演示 JSON，可自行修改后发送
4. 点击 **"全部类型演示"** 按钮，将依次自动发送所有 12 种消息类型
5. 长按自己发送的消息可撤回（调用 `revokeMessage` API）
6. 切换到 `Bob` 用户，可看到来自 Alice 的历史消息（对端视角）

### App 更新演示

1. 点击 **"检查 App 更新"**
2. 服务端若有 versionCode > 1 的版本即触发更新提示
3. 运行脚本 `scripts/publish-demo-assets.sh` 可发布 v1.0.1 演示版本

### 插件热更新演示

1. 点击 **"检查插件更新并缓存"**
2. 若服务端 `chat-home` 模块存在 > `1.0.0` 的 bundle，将自动下载并缓存至 `AsyncStorage`
3. 运行脚本 `scripts/publish-demo-assets.sh` 可发布演示 bundle

---

## 发布演示数据

```bash
cd XuqmGroup-RNChatDemo
./scripts/publish-demo-assets.sh
```

脚本发布内容：

1. `appId=ak_demo_chat` 的 Android App 版本 `1.0.1`（versionCode=2）
2. `moduleId=chat-home` 的 Android RN bundle 版本 `1.0.1`

---

## 消息渲染说明

`MessageBubble.tsx` 根据 `msgType` 字段自动选择渲染方式：

- **文本类**（TEXT、RICH_TEXT）：直接显示文本内容
- **媒体类**（IMAGE、VIDEO、AUDIO、FILE）：显示图标 + 关键信息（尺寸/时长/大小）
- **结构类**（LOCATION、NOTIFY、CUSTOM）：展示解析后的关键字段
- **通话类**（CALL_AUDIO、CALL_VIDEO）：显示通话类型 + 动作状态
- **转发消息**（FORWARD）：引用样式展示原始内容
- **已撤回**（REVOKED / status=REVOKED）：灰色气泡 + "此消息已被撤回"

---

## 注意事项

- 消息撤回后，服务端返回 `status=REVOKED` 的消息，Demo 会就地更新气泡
- 热更新演示的是"检查 + 下载 + 缓存"链路，缓存内容保存在 AsyncStorage
- 生产场景如需真正运行时热替换，需额外对接原生 bundle loader