diff --git a/docs/README.md b/docs/README.md index 455fbb2..2765b9a 100644 --- a/docs/README.md +++ b/docs/README.md @@ -1,12 +1,13 @@ # XuqmGroup RN Chat Demo -> 文档版本：V2.0 · 更新日期：2026-04-24 +> 文档版本：V3.0 · 更新日期：2026-04-24 -这个演示项目用于验证 `@xuqm/rn-sdk` 的三条核心能力： +验证 `@xuqm/rn-sdk` 四条核心能力： -1. **IM 聊天**：单聊消息发送与接收，覆盖全部 12 种消息类型，支持消息撤回 -2. **App 整包更新**：`update-service` 版本检查 -3. **RN 插件热更新**：热更新包检查、下载与本地缓存 +1. **单聊 IM**：发送与接收，覆盖全部 12 种消息类型，支持撤回 +2. **群聊 IM**：创建群组、加入群组、群发全消息类型，支持群消息撤回 +3. **App 整包更新**：版本检查、下载链接 / App Store 跳转 +4. **RN 插件热更新**：检查 → 下载 bundle → 缓存至 AsyncStorage（完整三步流程） --- @@ -17,9 +18,9 @@ | API 域名 | `https://sentry.xuqinmin.com` | | IM WebSocket | `wss://sentry.xuqinmin.com/ws/im` | | 演示 AppId | `ak_demo_chat` | -| 演示用户 | `demo_alice`、`demo_bob` | +| 演示用户 | `demo_alice`（Alice）、`demo_bob`（Bob） | | 演示模块 | `chat-home` | -| 本地 App 版本号 | `1`（写死，便于触发更新） | +| 本地 App 版本码 | `1`（写死，便于触发更新） | | 本地插件版本 | `1.0.0`（写死，便于触发热更新） | --- @@ -28,37 +29,37 @@ ``` XuqmGroup-RNChatDemo/ -├── App.tsx # 主入口，包含全部 Demo 逻辑 +├── App.tsx # 主入口，5 个演示区块 ├── src/ │ └── components/ -│ ├── MessageBubble.tsx # 消息气泡，支持所有消息类型渲染 -│ └── MessageComposer.tsx # 消息类型选择器 + 内容编辑区 -├── demo-assets/ # 演示用 APK 和 RN Bundle +│ ├── MessageBubble.tsx # 气泡渲染，支持全 13 种 msgType +│ ├── MessageComposer.tsx # 类型选择器 + 演示内容 + 一键全类型发送 +│ ├── GroupChatPanel.tsx # 群聊：创建群、加载群、群消息发送与撤回 +│ └── UpdatePanel.tsx # 更新：App 整包 + RN 热更新分步骤展示 +├── demo-assets/ # 演示用 APK 和 RN Bundle └── scripts/ - └── publish-demo-assets.sh # 一键发布演示版本数据到服务端 + └── 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 字符串。 +| 消息类型 | 说明 | 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` | 已撤回 | 服务端下发 | 灰色"已被撤回" | --- @@ -67,35 +68,53 @@ XuqmGroup-RNChatDemo/ ```bash cd XuqmGroup-RNChatDemo npm install -npm run start # Metro bundler -npm run android # Android 真机/模拟器 -npm run ios # iOS 模拟器 +npm run start # Metro bundler +npm run android # Android 真机/模拟器 +npm run ios # iOS 模拟器 ``` --- ## 演示步骤 -### IM 聊天演示 +### Section 1 · 当前会话 -1. App 启动后自动以 `Alice` 登录并拉取与 `Bob` 的历史消息 -2. 在消息类型选择器中点击不同类型（TEXT / IMAGE / VIDEO 等） -3. 内容区会自动填入该类型的演示 JSON，可自行修改后发送 -4. 点击 **"全部类型演示"** 按钮，将依次自动发送所有 12 种消息类型 -5. 长按自己发送的消息可撤回（调用 `revokeMessage` API） -6. 切换到 `Bob` 用户，可看到来自 Alice 的历史消息（对端视角） +- 切换 Alice / Bob，查看当前用户和单聊对象 +- "刷新历史"手动拉取会话历史；"重新登录"强制重连 WebSocket -### App 更新演示 +### Section 2 · 单聊演示 -1. 点击 **"检查 App 更新"** -2. 服务端若有 versionCode > 1 的版本即触发更新提示 -3. 运行脚本 `scripts/publish-demo-assets.sh` 可发布 v1.0.1 演示版本 +1. 水平滚动**消息类型选择器**，点击任意类型（TEXT/IMAGE/VIDEO…） +2. 内容区自动填入该类型的演示 JSON，可自行修改 +3. 点击 **"发送"** 发出单条消息 +4. 点击 **"全部类型演示"** 依次发送所有 12 种类型 +5. **长按自己的消息** → 弹出撤回确认 → 消息气泡变为"已被撤回" +6. 切换到 Bob 可看到 Alice 发送的消息（对端视角） -### 插件热更新演示 +### Section 3 · 群聊演示 -1. 点击 **"检查插件更新并缓存"** -2. 若服务端 `chat-home` 模块存在 > `1.0.0` 的 bundle，将自动下载并缓存至 `AsyncStorage` -3. 运行脚本 `scripts/publish-demo-assets.sh` 可发布演示 bundle +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` 演示版本 --- @@ -106,28 +125,30 @@ 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` +- `appId=ak_demo_chat` Android App 版本 `1.0.1`（versionCode=2） +- `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）：直接显示文本内容 -- **媒体类**（IMAGE、VIDEO、AUDIO、FILE）：显示图标 + 关键信息（尺寸/时长/大小） -- **结构类**（LOCATION、NOTIFY、CUSTOM）：展示解析后的关键字段 -- **通话类**（CALL_AUDIO、CALL_VIDEO）：显示通话类型 + 动作状态 -- **转发消息**（FORWARD）：引用样式展示原始内容 -- **已撤回**（REVOKED / status=REVOKED）：灰色气泡 + "此消息已被撤回" +所有接口通过 Nginx 反代至 `https://sentry.xuqinmin.com`。 --- ## 注意事项 -- 消息撤回后，服务端返回 `status=REVOKED` 的消息，Demo 会就地更新气泡 -- 热更新演示的是"检查 + 下载 + 缓存"链路，缓存内容保存在 AsyncStorage -- 生产场景如需真正运行时热替换，需额外对接原生 bundle loader +- 撤回后服务端返回 `status=REVOKED` / `msgType=REVOKED`，气泡就地更新 +- 热更新演示为"检查 + 下载 + 缓存"链路，不执行运行时 bundle 替换 +- 生产场景运行时热替换需对接原生 `BundleRuntime`（参考 `ProjectFrameReactNative`） +- 群消息通过 `/topic/group/{groupId}` WebSocket topic 实时推送