XuqmGroup-RNChatDemo/docs/README.md

# XuqmGroup RN Chat Demo

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

验证 `@xuqm/rn-sdk` 四条核心能力：

1. **单聊 IM**：发送与接收，覆盖全部 12 种消息类型，支持撤回
2. **群聊 IM**：创建群组、加入群组、群发全消息类型，支持群消息撤回
3. **App 整包更新**：版本检查、下载链接 / App Store 跳转
4. **RN 插件热更新**：检查 → 下载 bundle → 缓存至 AsyncStorage（完整三步流程）

---

## 当前配置

| 配置项 | 值 |
|--------|-----|
| API 域名 | `https://dev.xuqinmin.com` |
| 登录服务 | `demo-service`（`/api/demo/auth/*`） |
| IM WebSocket | `wss://im.dev.xuqinmin.com/ws/im` |
| 演示 AppId | `ak_demo_chat` |
| 演示用户 | `demo_alice`（Alice）、`demo_bob`（Bob） |
| 演示模块 | `chat-home` |
| 本地 App 版本码 | `1`（写死，便于触发更新） |
| 本地插件版本 | `1.0.0`（写死，便于触发热更新） |

---

## 项目结构

```
XuqmGroup-RNChatDemo/
├── App.tsx                          # 主入口，5 个演示区块
├── src/
│   └── components/
│       ├── MessageBubble.tsx        # 气泡渲染，支持全 13 种 msgType
│       ├── MessageComposer.tsx      # 类型选择器 + 演示内容 + 一键全类型发送
│       ├── GroupChatPanel.tsx       # 群聊：创建群、加载群、群消息发送与撤回
│       └── UpdatePanel.tsx          # 更新：App 整包 + RN 热更新分步骤展示
├── demo-assets/                     # 演示用 APK 和 RN Bundle
└── scripts/
    └── publish-demo-assets.sh       # 一键发布演示版本数据到服务端
```

---

## 支持的消息类型

| 消息类型 | 说明 | content 格式 | 气泡展示 |
|----------|------|-----------|---------|
| `TEXT` | 纯文本 | 字符串 | 直接显示文字 |
| `IMAGE` | 图片 | `{url,width,height,thumbnailUrl}` | 🖼️ 尺寸信息 |
| `VIDEO` | 视频 | `{url,duration,thumbnailUrl,size}` | 🎬 时长+大小 |
| `AUDIO` | 语音 | `{url,duration,size}` | 🎵 时长 |
| `FILE` | 文件 | `{url,name,size,mimeType}` | 📎 文件名+大小 |
| `CUSTOM` | 自定义 | 任意 JSON | ⚙️ title+desc |
| `LOCATION` | 位置 | `{lat,lng,address,title}` | 📍 地址+坐标 |
| `NOTIFY` | 系统通知 | `{title,content,level}` | 🔔 通知卡片 |
| `RICH_TEXT` | 富文本 | `{html}` | 📄 HTML 预览 |
| `CALL_AUDIO` | 语音通话信令 | `{callId,action,callerName}` | 📞 通话状态 |
| `CALL_VIDEO` | 视频通话信令 | `{callId,action,callerName}` | 📹 通话状态 |
| `FORWARD` | 转发消息 | `{originalMsgId,originalContent,originalSender}` | ↪️ 引用展示 |
| `REVOKED` | 已撤回 | 服务端下发 | 灰色"已被撤回" |

---

## 运行

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

---

## 演示步骤

### Section 1 · 当前会话

- 切换 Alice / Bob，查看当前用户和单聊对象
- "刷新历史"手动拉取会话历史；"重新登录"强制重连 WebSocket

### Section 2 · 单聊演示

1. 水平滚动**消息类型选择器**，点击任意类型（TEXT/IMAGE/VIDEO…）
2. 内容区自动填入该类型的演示 JSON，可自行修改
3. 点击 **"发送"** 发出单条消息
4. 点击 **"全部类型演示"** 依次发送所有 12 种类型
5. **长按自己的消息** → 弹出撤回确认 → 消息气泡变为"已被撤回"
6. 切换到 Bob 可看到 Alice 发送的消息（对端视角）

### Section 3 · 群聊演示

1. 点击 **"+ 创建演示群"** → 创建含 Alice + Bob 的群组并订阅群 topic
2. 点击 **"加载群列表"** 列出当前 appId 下所有群组
3. 点击群组名称切换当前群，自动拉取群历史
4. 使用消息类型选择器在群内发送任意类型消息
5. 点击 **"全部类型演示"** 依次发送 12 种群消息
6. 长按群消息可撤回

### Section 4 · 更新演示

**App 整包更新**

1. 点击 **"检查 App 更新"** → 向服务端查询版本
2. 若有更高版本，显示版本名、强更标志、下载链接
3. 点击 **"打开下载链接 ↗"** 触发下载/跳转

**RN 插件热更新（三步流程）**

1. 点击 **"开始热更新流程"**
   - 步骤 1：检查服务端 `chat-home` 模块是否有 > `1.0.0` 的版本
   - 步骤 2：自动下载 bundle 文件（显示源码字节数）
   - 步骤 3：写入 AsyncStorage（显示版本号、md5、时间）
2. 运行 `scripts/publish-demo-assets.sh` 可向服务端发布 `1.0.1` 演示版本

---

## 发布演示数据

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

发布内容：

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

---

## 服务端 API 路由

| 路径前缀 | 对应服务 | 端口 |
|----------|---------|-----|
| `/api/demo/` | demo-service | 8085 |
| `/api/im/` | im-service | 8082 |
| `/ws/im` | im-service (WebSocket) | 8082 |
| `/api/file/` | file-service | 8086 |
| `/api/v1/updates/` | update-service | 8084 |
| `/api/v1/rn/` | update-service | 8084 |
| `/api/` | tenant-service | 8081 |

所有接口通过 Nginx 反代至 `https://dev.xuqinmin.com`。

`demo-service` 负责 demo 账号体系的注册、登录、找回密码和资料更新；登录成功后会返回 `demoToken`、`imToken` 和 `profile`。其中 `profile.appId` 用于后续初始化 IM 和更新能力，不走租户服务登录链路。

---

## 注意事项

- 撤回后服务端返回 `status=REVOKED` / `msgType=REVOKED`，气泡就地更新
- 热更新演示为"检查 + 下载 + 缓存"链路，不执行运行时 bundle 替换
- 生产场景运行时热替换需对接原生 `BundleRuntime`（参考 `ProjectFrameReactNative`）
- 群消息通过 `/topic/group/{groupId}` WebSocket topic 实时推送