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 倉庫：

React：deeprespond-web-react-demo-1.0.0-alpha.zip
Vue：deeprespond-web-vue-demo-1.0.0-alpha.zip
校驗和：DEMO_PACKAGE_SHA256SUMS

執行

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`），在控制檯的應用詳情中檢視
`apiUrl`	IM 服務地址
`username` / `password`	預填的登入賬號（可選）
`ticket`	預置的一次性登入憑證（可選）
`peer`	登入後自動開啟與該使用者的會話（可選）

等價的環境變數為 VITE_IM_APPKEY、VITE_IM_APIURL 等；不要把真實密碼、Ticket 提交到 Git。

前置條件

一個已部署並可訪問的 IM 服務端；本地開發環境見倉庫 README.md 的本地開發一節。
表情回應與線上狀態預設關閉，需要在控制檯的應用策略中開啟；關閉時對應功能自動降級（線上點不顯示、回應操作報錯）。
語音錄製依賴瀏覽器的 MediaRecorder（localhost 或 HTTPS 下可用）；部分瀏覽器會把錄音封裝為檔案訊息傳送。

雙使用者互測

開兩個瀏覽器（或一個普通視窗加一個隱私視窗）分別登入兩個使用者：一側在「好友」頁輸入對方使用者名稱傳送申請，另一側在「好友」頁同意，即可體驗完整的單聊、群聊（建立群組時勾選對方、在群成員面板邀請）與回執、撤回、回應等流程。React 版可用 URL 引數 username / password 加速登入。

React / Vue 工程版 Demo ​

功能範圍 ​

下載 ​

執行 ​

前置條件 ​

雙使用者互測 ​

相關文件 ​

React / Vue 工程版 Demo

功能範圍

下載

執行

前置條件

雙使用者互測

相關文件