XuqmGroup-RNChatDemo/docs

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://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	已撤回	服务端下发	灰色"已被撤回"

---

运行

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 演示版本

---

发布演示数据

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/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 实时推送