XuqmGroup-RNChatDemo/docs

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 字符串。

---

运行

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

---

发布演示数据

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