UniApp H5 demo

sdk/uniapp/demo in the repository is a runnable mobile H5 chat example based on @deeprespond/im-uniapp/h5. Its pages follow a typical mobile chat app: bottom navigation, full-screen conversation pages and a profile drawer; at desktop widths it's only a responsive preview. Use it to try the SDK's features, or move its page state and event handling into UniApp Vue pages.

What it covers

Area	Covers
Account	Sign-in with a ticket, username and password sign-in and sign-up, sign-out, connection status and logs
Conversations	Conversation list, unread counts, search, draft one-to-one chats, automatic read marking, typing indicators
Friends	Friend list, profiles, remarks, removing friends, blocklist, and sending, accepting and declining friend requests
Messages	Text, image, video and file messages, recall, 👍 reactions; once the first one-to-one message is sent, the draft conversation becomes a real one automatically
Recording and location	Voice recording and location messages; when the browser lacks microphone or location permission, the UI shows the SDK's failure reason
Audio and video	Voice and video call entry points and advanced RTC channel controls; when a feature isn't available, the UI shows the SDK's error
UI	Editing the nickname, contact profile sidebar, Chinese and English UI, responsive narrow-screen layout

Run it

cd sdk/uniapp/demo
cp .env.example .env.local
# 编辑 .env.local；不要提交真实密码、Ticket 或长期密钥。
pnpm install
pnpm dev

Open the address Vite prints (http://127.0.0.1:5175 by default). You can also leave .env.local alone and fill in the App Key, API URL and ticket on the sign-in card.

Environment variables

Copy .env.example to .env.local and fill in what you need; all are optional:

Variable	Description
VITE_IM_APP_KEY	The app's App Key; default org#app
VITE_IM_API_URL	IM service address; not needed for same-origin deployments (the local dev proxy or a production reverse proxy)
VITE_IM_WS_URL	WebSocket address, optional
VITE_IM_TICKET	A prefilled sign-in ticket, optional
VITE_IM_USERNAME / VITE_IM_PASSWORD	A prefilled test account, optional
VITE_IM_TARGET_USERNAME	The account to test against, optional
VITE_IM_RTC_CHANNEL	Channel name; default demo-channel
VITE_IM_RTC_TICKET	Channel ticket, optional

Don't commit real passwords, tickets or long-lived secrets to Git; in production, your server should issue short-lived tickets.

Testing with several accounts

The demo sets sessionScope: "tab": the sign-in is kept in sessionStorage, so a tab stays signed in when refreshed, and different tabs can sign in as different accounts. Sign in as Alice and Bob in two tabs to message, add friends and call each other; for channels, use three accounts to test the host, members joining and leaving, and media subscriptions. Your own project can keep tokens persistently to suit its sign-in flow, but don't put long-lived credentials in front-end code.

Build and check

pnpm typecheck
pnpm build
pnpm preview

The build runs strict TypeScript checks.

Demo source package (1.0.1, without dependencies or local config): deeprespond-uniapp-demo-h5-1.0.1.zip

Related demos

The same SDK has two more runnable examples:

• UniApp WeChat mini program demo: @deeprespond/im-uniapp/miniprogram, runs in WeChat Developer Tools and as H5.
• UniApp App (Android / iOS) demo: @deeprespond/im-uniapp/app plus native plugins, runs on real devices and as H5.

Moving it into UniApp pages

The demo's pages are written with Vite and plain TypeScript and don't depend on the UniApp runtime, so the state management and event handling in src/ can move straight into UniApp Vue pages. Code that imports @deeprespond/im-uniapp/h5 must sit inside an #ifdef H5 conditional compilation block; for creating and destroying the client, see H5 integration.