React / Vue project demos

The repository includes two runnable project demos built on the bindings, showing the recommended way to use the Web SDK in React and Vue:

• 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).

The two demos implement the same feature list. The client is created once at module top level, data reaches the component tree through DRProvider / createDRPlugin, and lists use useLiveList / useMessageList (the Vue composables have the same names). Even the automated test selectors (data-testid) match, so the two are easy to compare and regression-test. To try everything the SDK can do (including audio and video calls), use the H5 demo page; to see the standard integration in a React or Vue project, use these two.

Features

Area	What's covered
Account	Password sign-in, ticket sign-in, registration (signs in automatically), sign-out, connection status bar, session-expired notice
Conversations	List (title, preview, unread, pinned, muted, draft), starting a one-to-one chat (draft conversations upgrade automatically), pinning, muting, mark as unread, deletion, unread total
Messages	Text (mentions, links), images (thumbnail + lightbox), files, voice recording and playback, quoted replies, recall, reactions, pinning, copy, delete for me, resend on failure, loading older messages, date separators, typing indicator
Receipts	Automatic mark as read; one-to-one chats show "Read / Delivered"
Friends	Friend list (presence dots), adding friends, accepting and declining requests (unread badge), remarks, removal, blocklist
Groups	Creating groups (choosing friends), group list, group members (roles, removal, direct message), inviting, leaving, dissolving (owner), system notices
UI	Light and dark themes, toast error messages (DRError turned into Chinese text), responsive desktop and narrow layouts

Audio and video calls, chat rooms, standalone channels, forwarding and reports aren't included; see the H5 demo page for those.

Download

The source packages share the SDK's version, and their dependencies point to the published npm packages (@deeprespond/im-web, @deeprespond/im-web-react, @deeprespond/im-web-vue). Unzip, install and run; there's no need to clone the SDK repository:

• React: deeprespond-web-react-demo-1.0.0-alpha.zip
• Vue: deeprespond-web-vue-demo-1.0.0-alpha.zip
• Checksums: DEMO_PACKAGE_SHA256SUMS

Run

# 前置条件：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

The sign-in card offers three methods: password, ticket (a one-time ticket issued by your backend) and registration (signs in right after registering). You can also prefill it with URL parameters (for development and testing; real projects should have your backend issue short-lived tickets):

http://127.0.0.1:5196/?appKey=org%23app&apiUrl=https://im.example.com&username=alice&password=…

Parameter	Description
appKey	The app's AppKey (org_name#app_name); find it in the app details in the console
apiUrl	The IM service URL
username / password	Prefilled account (optional)
ticket	A one-time sign-in ticket (optional)
peer	Opens a conversation with this user after sign-in (optional)

The equivalent environment variables are VITE_IM_APPKEY, VITE_IM_APIURL and so on. Never commit real passwords or tickets to Git.

Prerequisites

• A deployed, reachable IM server. For local development, see the local development section of the repository's README.md.
• Reactions and presence are off by default; turn them on in the app's runtime policies in the console. When they're off, the related features degrade (no presence dots, and reacting shows an error).
• Voice recording needs the browser's MediaRecorder (available on localhost or HTTPS). Some browsers send recordings as file messages.

Testing with two users

Open two browsers (or a normal window and a private window) and sign in as two users. On one side, enter the other user's username on the "Friends" page to send a request; accept it on the other side's "Friends" page. You can then try the full one-to-one chat, group chat (select the other user when creating a group, or invite from the group member panel), receipts, recall, reactions and so on. In the React demo, the username / password URL parameters speed up sign-in.

Related docs

• Using with React and Vue: every export of the bindings and the recommended patterns.
• H5 demo page: a single-file demo of everything the SDK can do (including audio and video calls).
• Quickstart: every step to build a web page that sends and receives messages from scratch.