ReactJS Live Guest Queue Tutorial

Build a live guest queue with mediasfu-reactjs@4.4.2. The supplied room keeps waiting people, speak requests, admission, media, alerts, and exit together.

Prerequisites

• Node.js 18 to 20, React 18, HTTPS or localhost, and host/guest profiles.
• Authenticated create/join endpoints and backend guest-eligibility policy.

Project files

package.json

{"private":true,"scripts":{"dev":"vite"},"dependencies":{"mediasfu-reactjs":"4.4.2","react":"18.2.0","react-dom":"18.2.0"},"devDependencies":{"@types/react":"18.3.24","@types/react-dom":"18.3.7","@vitejs/plugin-react":"4.3.4","typescript":"5.9.3","vite":"5.4.19"}}

src/App.tsx

import { ModernMediasfuGeneric, type CreateRoomOnMediaSFUType, type JoinRoomOnMediaSFUType } from 'mediasfu-reactjs';
async function postRoom<T>(url: string, payload: unknown): Promise<T> { const response = await fetch(url, { method: 'POST', credentials: 'same-origin', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) }); if (!response.ok) throw new Error(`Room request failed (HTTP ${response.status}).`); return response.json() as Promise<T>; }
const createRoom: CreateRoomOnMediaSFUType = ({ payload }) => postRoom('/api/mediasfu/create-room', payload);
const joinRoom: JoinRoomOnMediaSFUType = ({ payload }) => postRoom('/api/mediasfu/join-room', payload);
export default function App() { return <main><header><h1>Live guest queue</h1><p>Use Waiting and Requests to review the next guest.</p></header><ModernMediasfuGeneric connectMediaSFU={true} createMediaSFURoom={createRoom} joinMediaSFURoom={joinRoom} /></main>; }

src/main.tsx

import { StrictMode } from 'react'; import { createRoot } from 'react-dom/client'; import App from './App'; createRoot(document.getElementById('root')!).render(<StrictMode><App /></StrictMode>);

index.html

<!doctype html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width,initial-scale=1" /><title>Live guest queue</title></head><body><div id="root"></div><script type="module" src="/src/main.tsx"></script></body></html>

vite.config.ts

import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; export default defineConfig({ plugins: [react()] });

tsconfig.json

{"compilerOptions":{"target":"ES2022","lib":["DOM","ES2022"],"strict":true,"module":"ESNext","moduleResolution":"Bundler","skipLibCheck":true,"noEmit":true,"jsx":"react-jsx"},"include":["src"]}

Use restricted, revocable, uncommitted development credentials only on an isolated local backend. Before distribution, external testing, or production, reusable Cloud credentials must stay on the authenticated backend.

Backend

Implement the two API routes using the complete public production room credential boundary. The backend authenticates the host and guest before forwarding a room request; it never returns a Cloud credential.

Run

npm install
npm run dev

Expected result

The guest enters the waiting/request flow, the host sees the correct pending state, and an approved guest becomes a room participant. Rejection keeps the person outside the active room and produces a clear state.

Recovery

Keep waiting, requested, admitted, rejected, and left distinct. After reconnect, refresh room state and require a new decision; do not replay an admission.

Cleanup

Clear queue selection after each decision. On leave or host end, remove local queue state and expire temporary room authority on the backend.