Web demo guide

The repository includes sdk/web/examples/app.html, a complete IM web demo that needs no build tools. Sign-in, one-to-one and group chat, message interactions, friends, and audio and video calls all work out of the box. Use it to try the SDK quickly, or copy its state management and event handling into your own project. The page loads the SDK as an ES module (the package ships with its built dist/, the same version as the npm package @deeprespond/im-web), so you don't need Node or npm install.

Features

Area	What's covered
Account	Ticket, password and registration sign-in; automatic sign-in from URL parameters; sign-out; editing profile and password; connection status and the leader-tab badge
Conversations	Conversation list (unread badges, pinned, muted, draft previews), search, mark as unread, clear and delete, mark all read
Messages	Text, images (full-size viewer), files, voice (recording), video and location messages; quoted replies, forwarding, reactions, pinning, recall and recall notices, delete for me, failure markers, read receipts, typing indicator, automatic draft saving, local search, date separators, loading older messages
Friends	Adding friends (with a message), accepting and declining requests, remarks, removal, blocklist
Groups	Creating groups (choosing initial members), inviting members, member grid with role badges, mute everyone, leaving, dissolving, applying to public groups
Audio and video	Voice and video calls: start panel, incoming-call banner, answering and declining, mute and camera toggles, hanging up, call record messages
Other	New-message toasts (decided by push settings), device management (signing out devices), diagnostics, reports, dark mode, shared connection across tabs, responsive layout for narrow screens

Download and run

Demo package (ships with dist/; unzip and use, no npm needed): deeprespond-im-web-demo-1.0.5.zip. Checksums are in DEMO_PACKAGE_SHA256SUMS.

This package is built from the 1.0.5 source, and that version isn't necessarily published to npm or a CDN. It includes two fixes: loading media dependencies when answering a call on an H5 page, and the retry interval after an attachment upload fails.

• To update the demo, replace the whole directory and keep the complete dist/ (including the LiveKit chunks loaded on demand).
• The SDK inside this package is updated separately from npm and the CDN. Projects using npm or the CDN need to upgrade to an SDK version that includes these fixes.

unzip deeprespond-im-web-demo-1.0.5.zip
cd deeprespond-im-web-demo-1.0.5
python3 -m http.server 8080

Open http://127.0.0.1:8080/examples/app.html. Because the page loads the SDK as an ES module, it must be served over HTTP (double-clicking the file won't work). Use localhost or HTTPS (a secure context) if you can.

To build the same package from a repository checkout:

make sdk-web-demo-package   # 输出 release/sdk-<版本>/deeprespond-im-web-demo-<版本>.zip

Sign in

The sign-in card offers three methods: ticket (a one-time ticket issued by your backend), password and registration. It also supports automatic sign-in from URL parameters:

http://127.0.0.1:8080/examples/app.html?appKey=org%23app&apiUrl=https://im.example.com&ticket=<凭证>

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
ticket	A one-time sign-in ticket (optional); see Quickstart for how to issue one

The AppKey can be in the web page. A ticket works like a temporary password: only get it from your backend, and never hard-code it in the page or commit it to Git.

Prerequisites

• A deployed, reachable IM server. For local development, see the local development section of the repository's README.md.
• Audio and video calls and reactions are off by default; turn them on in the app's runtime policies in the console. Calls also need a media service (LiveKit) URL the browser can reach.
• When the page is opened over plain HTTP (not localhost), the browser blocks the camera and microphone, so voice and video features are limited.

Testing with two users

Open two browsers (or a normal window and a private window) and sign in as two users. On one side, add the other as a friend under "Contacts"; on the other side, accept under "Contacts → Friend requests". You can then try the full one-to-one chat, group chat (select the other user when creating a group) and call flows. A second tab in the same browser shares the sign-in automatically (the leader-tab badge shows in the top-right corner).

Related docs

• React / Vue project demos: two project demos built on the bindings (source packages available for download).
• Overview and installation: what the SDK can do, requirements and installation.
• Quickstart: every step to build a web page that sends and receives messages from scratch.
• The demo page is sdk/web/examples/app.html in the repository; a minimal API example is basic.html in the same directory.