docs: 更新 README 至 V3.0,补充群聊演示和分步热更新说明
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
这个提交包含在:
父节点
681902ab34
当前提交
e2bd914dd3
133
docs/README.md
133
docs/README.md
@ -1,12 +1,13 @@
|
|||||||
# XuqmGroup RN Chat Demo
|
# XuqmGroup RN Chat Demo
|
||||||
|
|
||||||
> 文档版本:V2.0 · 更新日期:2026-04-24
|
> 文档版本:V3.0 · 更新日期:2026-04-24
|
||||||
|
|
||||||
这个演示项目用于验证 `@xuqm/rn-sdk` 的三条核心能力:
|
验证 `@xuqm/rn-sdk` 四条核心能力:
|
||||||
|
|
||||||
1. **IM 聊天**:单聊消息发送与接收,覆盖全部 12 种消息类型,支持消息撤回
|
1. **单聊 IM**:发送与接收,覆盖全部 12 种消息类型,支持撤回
|
||||||
2. **App 整包更新**:`update-service` 版本检查
|
2. **群聊 IM**:创建群组、加入群组、群发全消息类型,支持群消息撤回
|
||||||
3. **RN 插件热更新**:热更新包检查、下载与本地缓存
|
3. **App 整包更新**:版本检查、下载链接 / App Store 跳转
|
||||||
|
4. **RN 插件热更新**:检查 → 下载 bundle → 缓存至 AsyncStorage(完整三步流程)
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
@ -17,9 +18,9 @@
|
|||||||
| API 域名 | `https://sentry.xuqinmin.com` |
|
| API 域名 | `https://sentry.xuqinmin.com` |
|
||||||
| IM WebSocket | `wss://sentry.xuqinmin.com/ws/im` |
|
| IM WebSocket | `wss://sentry.xuqinmin.com/ws/im` |
|
||||||
| 演示 AppId | `ak_demo_chat` |
|
| 演示 AppId | `ak_demo_chat` |
|
||||||
| 演示用户 | `demo_alice`、`demo_bob` |
|
| 演示用户 | `demo_alice`(Alice)、`demo_bob`(Bob) |
|
||||||
| 演示模块 | `chat-home` |
|
| 演示模块 | `chat-home` |
|
||||||
| 本地 App 版本号 | `1`(写死,便于触发更新) |
|
| 本地 App 版本码 | `1`(写死,便于触发更新) |
|
||||||
| 本地插件版本 | `1.0.0`(写死,便于触发热更新) |
|
| 本地插件版本 | `1.0.0`(写死,便于触发热更新) |
|
||||||
|
|
||||||
---
|
---
|
||||||
@ -28,11 +29,13 @@
|
|||||||
|
|
||||||
```
|
```
|
||||||
XuqmGroup-RNChatDemo/
|
XuqmGroup-RNChatDemo/
|
||||||
├── App.tsx # 主入口,包含全部 Demo 逻辑
|
├── App.tsx # 主入口,5 个演示区块
|
||||||
├── src/
|
├── src/
|
||||||
│ └── components/
|
│ └── components/
|
||||||
│ ├── MessageBubble.tsx # 消息气泡,支持所有消息类型渲染
|
│ ├── MessageBubble.tsx # 气泡渲染,支持全 13 种 msgType
|
||||||
│ └── MessageComposer.tsx # 消息类型选择器 + 内容编辑区
|
│ ├── MessageComposer.tsx # 类型选择器 + 演示内容 + 一键全类型发送
|
||||||
|
│ ├── GroupChatPanel.tsx # 群聊:创建群、加载群、群消息发送与撤回
|
||||||
|
│ └── UpdatePanel.tsx # 更新:App 整包 + RN 热更新分步骤展示
|
||||||
├── demo-assets/ # 演示用 APK 和 RN Bundle
|
├── demo-assets/ # 演示用 APK 和 RN Bundle
|
||||||
└── scripts/
|
└── scripts/
|
||||||
└── publish-demo-assets.sh # 一键发布演示版本数据到服务端
|
└── publish-demo-assets.sh # 一键发布演示版本数据到服务端
|
||||||
@ -42,23 +45,21 @@ XuqmGroup-RNChatDemo/
|
|||||||
|
|
||||||
## 支持的消息类型
|
## 支持的消息类型
|
||||||
|
|
||||||
| 消息类型 | 说明 | 演示内容 |
|
| 消息类型 | 说明 | content 格式 | 气泡展示 |
|
||||||
|----------|------|----------|
|
|----------|------|-----------|---------|
|
||||||
| `TEXT` | 纯文本 | 普通文字 |
|
| `TEXT` | 纯文本 | 字符串 | 直接显示文字 |
|
||||||
| `IMAGE` | 图片 | URL + 尺寸信息,picsum 示例图 |
|
| `IMAGE` | 图片 | `{url,width,height,thumbnailUrl}` | 🖼️ 尺寸信息 |
|
||||||
| `VIDEO` | 视频 | URL + 时长 + 文件大小 |
|
| `VIDEO` | 视频 | `{url,duration,thumbnailUrl,size}` | 🎬 时长+大小 |
|
||||||
| `AUDIO` | 语音 | URL + 时长 |
|
| `AUDIO` | 语音 | `{url,duration,size}` | 🎵 时长 |
|
||||||
| `FILE` | 文件 | URL + 文件名 + 大小 |
|
| `FILE` | 文件 | `{url,name,size,mimeType}` | 📎 文件名+大小 |
|
||||||
| `CUSTOM` | 自定义 | 自定义卡片(任意 JSON) |
|
| `CUSTOM` | 自定义 | 任意 JSON | ⚙️ title+desc |
|
||||||
| `LOCATION` | 位置 | 经纬度 + 地址(天安门广场) |
|
| `LOCATION` | 位置 | `{lat,lng,address,title}` | 📍 地址+坐标 |
|
||||||
| `NOTIFY` | 系统通知 | 标题 + 内容 |
|
| `NOTIFY` | 系统通知 | `{title,content,level}` | 🔔 通知卡片 |
|
||||||
| `RICH_TEXT` | 富文本 | HTML 内容 |
|
| `RICH_TEXT` | 富文本 | `{html}` | 📄 HTML 预览 |
|
||||||
| `CALL_AUDIO` | 语音通话信令 | callId + 通话动作 |
|
| `CALL_AUDIO` | 语音通话信令 | `{callId,action,callerName}` | 📞 通话状态 |
|
||||||
| `CALL_VIDEO` | 视频通话信令 | callId + 通话动作 |
|
| `CALL_VIDEO` | 视频通话信令 | `{callId,action,callerName}` | 📹 通话状态 |
|
||||||
| `FORWARD` | 转发消息 | 原消息 ID + 原始内容 |
|
| `FORWARD` | 转发消息 | `{originalMsgId,originalContent,originalSender}` | ↪️ 引用展示 |
|
||||||
| `REVOKED` | 已撤回 | 服务端下发,气泡显示"已撤回" |
|
| `REVOKED` | 已撤回 | 服务端下发 | 灰色"已被撤回" |
|
||||||
|
|
||||||
非文本消息的 `content` 字段均为 JSON 字符串。
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
@ -76,26 +77,44 @@ npm run ios # iOS 模拟器
|
|||||||
|
|
||||||
## 演示步骤
|
## 演示步骤
|
||||||
|
|
||||||
### IM 聊天演示
|
### Section 1 · 当前会话
|
||||||
|
|
||||||
1. App 启动后自动以 `Alice` 登录并拉取与 `Bob` 的历史消息
|
- 切换 Alice / Bob,查看当前用户和单聊对象
|
||||||
2. 在消息类型选择器中点击不同类型(TEXT / IMAGE / VIDEO 等)
|
- "刷新历史"手动拉取会话历史;"重新登录"强制重连 WebSocket
|
||||||
3. 内容区会自动填入该类型的演示 JSON,可自行修改后发送
|
|
||||||
4. 点击 **"全部类型演示"** 按钮,将依次自动发送所有 12 种消息类型
|
|
||||||
5. 长按自己发送的消息可撤回(调用 `revokeMessage` API)
|
|
||||||
6. 切换到 `Bob` 用户,可看到来自 Alice 的历史消息(对端视角)
|
|
||||||
|
|
||||||
### App 更新演示
|
### Section 2 · 单聊演示
|
||||||
|
|
||||||
1. 点击 **"检查 App 更新"**
|
1. 水平滚动**消息类型选择器**,点击任意类型(TEXT/IMAGE/VIDEO…)
|
||||||
2. 服务端若有 versionCode > 1 的版本即触发更新提示
|
2. 内容区自动填入该类型的演示 JSON,可自行修改
|
||||||
3. 运行脚本 `scripts/publish-demo-assets.sh` 可发布 v1.0.1 演示版本
|
3. 点击 **"发送"** 发出单条消息
|
||||||
|
4. 点击 **"全部类型演示"** 依次发送所有 12 种类型
|
||||||
|
5. **长按自己的消息** → 弹出撤回确认 → 消息气泡变为"已被撤回"
|
||||||
|
6. 切换到 Bob 可看到 Alice 发送的消息(对端视角)
|
||||||
|
|
||||||
### 插件热更新演示
|
### Section 3 · 群聊演示
|
||||||
|
|
||||||
1. 点击 **"检查插件更新并缓存"**
|
1. 点击 **"+ 创建演示群"** → 创建含 Alice + Bob 的群组并订阅群 topic
|
||||||
2. 若服务端 `chat-home` 模块存在 > `1.0.0` 的 bundle,将自动下载并缓存至 `AsyncStorage`
|
2. 点击 **"加载群列表"** 列出当前 appId 下所有群组
|
||||||
3. 运行脚本 `scripts/publish-demo-assets.sh` 可发布演示 bundle
|
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` 演示版本
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
@ -106,28 +125,30 @@ cd XuqmGroup-RNChatDemo
|
|||||||
./scripts/publish-demo-assets.sh
|
./scripts/publish-demo-assets.sh
|
||||||
```
|
```
|
||||||
|
|
||||||
脚本发布内容:
|
发布内容:
|
||||||
|
|
||||||
1. `appId=ak_demo_chat` 的 Android App 版本 `1.0.1`(versionCode=2)
|
- `appId=ak_demo_chat` Android App 版本 `1.0.1`(versionCode=2)
|
||||||
2. `moduleId=chat-home` 的 Android RN bundle 版本 `1.0.1`
|
- `moduleId=chat-home` Android RN bundle 版本 `1.0.1`
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## 消息渲染说明
|
## 服务端 API 路由
|
||||||
|
|
||||||
`MessageBubble.tsx` 根据 `msgType` 字段自动选择渲染方式:
|
| 路径前缀 | 对应服务 | 端口 |
|
||||||
|
|----------|---------|-----|
|
||||||
|
| `/api/im/` | im-service | 8082 |
|
||||||
|
| `/ws/im` | im-service (WebSocket) | 8082 |
|
||||||
|
| `/api/v1/updates/` | update-service | 8084 |
|
||||||
|
| `/api/v1/rn/` | update-service | 8084 |
|
||||||
|
| `/api/` | tenant-service | 8081 |
|
||||||
|
|
||||||
- **文本类**(TEXT、RICH_TEXT):直接显示文本内容
|
所有接口通过 Nginx 反代至 `https://sentry.xuqinmin.com`。
|
||||||
- **媒体类**(IMAGE、VIDEO、AUDIO、FILE):显示图标 + 关键信息(尺寸/时长/大小)
|
|
||||||
- **结构类**(LOCATION、NOTIFY、CUSTOM):展示解析后的关键字段
|
|
||||||
- **通话类**(CALL_AUDIO、CALL_VIDEO):显示通话类型 + 动作状态
|
|
||||||
- **转发消息**(FORWARD):引用样式展示原始内容
|
|
||||||
- **已撤回**(REVOKED / status=REVOKED):灰色气泡 + "此消息已被撤回"
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## 注意事项
|
## 注意事项
|
||||||
|
|
||||||
- 消息撤回后,服务端返回 `status=REVOKED` 的消息,Demo 会就地更新气泡
|
- 撤回后服务端返回 `status=REVOKED` / `msgType=REVOKED`,气泡就地更新
|
||||||
- 热更新演示的是"检查 + 下载 + 缓存"链路,缓存内容保存在 AsyncStorage
|
- 热更新演示为"检查 + 下载 + 缓存"链路,不执行运行时 bundle 替换
|
||||||
- 生产场景如需真正运行时热替换,需额外对接原生 bundle loader
|
- 生产场景运行时热替换需对接原生 `BundleRuntime`(参考 `ProjectFrameReactNative`)
|
||||||
|
- 群消息通过 `/topic/group/{groupId}` WebSocket topic 实时推送
|
||||||
|
|||||||
正在加载...
在新工单中引用
屏蔽一个用户