深应智联

外观

控制台

React / Vue 工程版 Demo ​

仓库提供两个基于绑定包的可运行工程版 Demo，展示在 React 和 Vue 中接入 Web SDK 的推荐写法：

  • React：sdk/web-react/demo（Vite + React 18 + @deeprespond/im-web-react）；
  • Vue：sdk/web-vue/demo（Vite + Vue 3.5 + @deeprespond/im-web-vue）。

两个 Demo 是同一张功能表的两套实现：客户端只在模块顶层创建一次，数据经 DRProvider / createDRPlugin 进入组件树，列表用 useLiveList / useMessageList（Vue 的组合式函数同名），自动化测试选择器（data-testid）也保持一致，便于对照与回归。想快速体验 SDK 的全部能力（含音视频通话）用H5 演示页；想在 React / Vue 工程里看标准的接入写法用这两个。

功能范围 ​

模块覆盖内容
账号密码登录、Ticket 登录、注册（自动登录）、退出、连接状态条、登录失效提示
会话列表（标题 / 摘要 / 未读 / 置顶 / 免打扰 / 草稿）、开始单聊（草稿会话自动升级）、置顶、免打扰、标为未读、删除、未读总数
消息文本（@提及、链接）、图片（缩略图 + 灯箱）、文件、语音录制与播放、引用回复、撤回、表情回应、置顶、复制、删除（仅本人）、失败重发、加载更早、日期分隔、正在输入
回执自动标记已读；单聊显示「已读 / 已送达」
好友好友列表（在线状态点）、添加好友、申请的同意与拒绝（未读角标）、备注、删除、黑名单
群组建群（选择好友）、群列表、群成员（角色、移出、私聊）、邀请、退群、解散（群主）、系统提示
界面亮 / 暗主题、Toast 错误提示（DRError 转中文文案）、桌面与窄视口响应式

音视频通话、聊天室、独立频道、转发与举报不在其中，见 H5 演示页。

下载 ​

源码包与 SDK 同版本，依赖已指向已发布的 npm 制品（@deeprespond/im-web、@deeprespond/im-web-react、@deeprespond/im-web-vue），解压即可安装运行，无需克隆 SDK 仓库：

运行 ​

bash
# 前置条件：Node.js ≥ 20.19 与 pnpm ≥ 9
unzip deeprespond-web-react-demo-1.0.0-alpha.zip   # 或 deeprespond-web-vue-demo-…zip
cd deeprespond-web-react-demo-1.0.0-alpha
pnpm install
pnpm dev        # React：http://127.0.0.1:5196；Vue：http://127.0.0.1:5197

登录卡片支持三种方式：密码、Ticket（业务服务端签发的一次性凭证）、注册（注册即自动登录）。也可以用 URL 参数预填（开发与联调用；正式项目应由业务服务端签发短期 Ticket）：

http://127.0.0.1:5196/?appKey=org%23app&apiUrl=https://im.example.com&username=alice&password=…
参数说明
appKey应用 AppKey（org_name#app_name），在控制台的应用详情中查看
apiUrlIM 服务地址
username / password预填的登录账号（可选）
ticket预置的一次性登录凭证（可选）
peer登录后自动打开与该用户的会话（可选）

等价的环境变量为 VITE_IM_APPKEY、VITE_IM_APIURL 等；不要把真实密码、Ticket 提交到 Git。

前置条件 ​

  • 一个已部署并可访问的 IM 服务端；本地开发环境见仓库 README.md 的本地开发一节。
  • 表情回应与在线状态默认关闭，需要在控制台的应用策略中开启；关闭时对应功能自动降级（在线点不显示、回应操作报错）。
  • 语音录制依赖浏览器的 MediaRecorder（localhost 或 HTTPS 下可用）；部分浏览器会把录音封装为文件消息发送。

双用户互测 ​

开两个浏览器（或一个普通窗口加一个隐私窗口）分别登录两个用户：一侧在「好友」页输入对方用户名发送申请，另一侧在「好友」页同意，即可体验完整的单聊、群聊（创建群组时勾选对方、在群成员面板邀请）与回执、撤回、回应等流程。React 版可用 URL 参数 username / password 加速登录。

相关文档 ​