Waiting Room·续

const currentState = meeting.self.roomState;

if (currentState === "waitlisted") {
    console.log("Waiting for approval");
} else if (currentState === "joined") {
    console.log("In the meeting");
} else if (currentState === "rejected") {
    console.log("Entry was rejected");
}

Use the event listeners shown above to monitor state changes.

Use the event listeners shown above to monitor state changes.

Handle all waiting room states in one component:

function WaitingRoomManager() {
    const roomState = useRealtimeKitSelector((m) => m.self.roomState);

switch (roomState) {
        case "init":
            return <Text>Connecting...</Text>;
        case "waitlisted":
            return <Text>Waiting for host approval...</Text>;
        case "joined":
            return <Text>You are in the meeting</Text>;
        case "rejected":
            return <Text>Your entry was rejected</Text>;
        case "left":
            return <Text>You left the meeting</Text>;
        case "kicked":
            return <Text>You were removed from the meeting</Text>;
        case "ended":
            return <Text>The meeting has ended</Text>;
        case "disconnected":
            return <Text>Connection lost</Text>;
        default:
            return null;
    }
}

Host Actions

Hosts can manage waiting room requests using participant management methods. For details, refer to Remote Participants. The methods are:

  • acceptWaitingRoomRequest(participantId) - Accept a participant from the waiting room
  • rejectWaitingRoomRequest(participantId) - Reject a participant's entry request

Example: Host Accepting Participants

import {
    useRealtimeKitClient,
    useRealtimeKitSelector,
} from "@cloudflare/realtimekit-react";

function WaitingRoomHost() {
    const [meeting] = useRealtimeKitClient();
    const waitlistedParticipants = useRealtimeKitSelector((m) =>
        m.participants.waitlisted.toArray(),
    );

const acceptParticipant = async (participantId) => {
        await meeting.participants.acceptWaitingRoomRequest(participantId);
    };

const rejectParticipant = async (participantId) => {
        await meeting.participants.rejectWaitingRoomRequest(participantId);
    };

return (
        <div>
            <h3>Waiting Room ({waitlistedParticipants.length})</h3>
            {waitlistedParticipants.map((participant) => (
                <div key={participant.id}>
                    <span>{participant.name}</span>
                    <button onClick={() => acceptParticipant(participant.id)}>
                        Accept
                    </button>
                    <button onClick={() => rejectParticipant(participant.id)}>
                        Reject
                    </button>
                </div>
            ))}
        </div>
    );
}

// Get waitlisted participants
const waitlistedParticipants = meeting.participants.waitlisted.toArray();

// Accept the first waitlisted participant
if (waitlistedParticipants.length > 0) {
    const participantId = waitlistedParticipants[0].id;
    await meeting.participants.acceptWaitingRoomRequest(participantId);
}

// Get waitlisted participants
val waitlistedParticipants = meeting.participants.waitlisted

// Accept a participant from the waiting room
if (waitlistedParticipants.isNotEmpty()) {
    val participant = waitlistedParticipants[0]
    meeting.participants.acceptWaitingRoomRequest(participant.id)
}

// Reject a participant's entry request
if (waitlistedParticipants.isNotEmpty()) {
    val participant = waitlistedParticipants[0]
    meeting.participants.rejectWaitingRoomRequest(participant.id)
}

// Listen for waiting room events
meeting.addWaitlistEventListener(object : RtkWaitlistEventListener {
    override fun onWaitListParticipantJoined(participant: RtkRemoteParticipant) {
        // Called when a new participant joins the waiting room
    }

override fun onWaitListParticipantAccepted(participant: RtkRemoteParticipant) {
        // Called when a waitlisted participant is accepted into the meeting
    }

override fun onWaitListParticipantRejected(participant: RtkRemoteParticipant) {
        // Called when a waitlisted participant is denied entry
    }

override fun onWaitListParticipantClosed(participant: RtkRemoteParticipant) {
        // Called when a waitlisted participant leaves the waiting room
    }
})

// Get waitlisted participants
let waitlistedParticipants = meeting.participants.waitlisted

// Accept a participant from the waiting room
if let participant = waitlistedParticipants.first {
    meeting.participants.acceptWaitingRoomRequest(id: participant.id)
}

// Reject a participant's entry request
if let participant = waitlistedParticipants.first {
    meeting.participants.rejectWaitingRoomRequest(participant.id)
}

// Listen for waiting room events
extension MeetingViewModel: RtkWaitlistEventListener {
    func onWaitListParticipantJoined(participant: RtkRemoteParticipant) {
        // Called when a new participant joins the waiting room
    }

func onWaitListParticipantAccepted(participant: RtkRemoteParticipant) {
        // Called when a waitlisted participant is accepted into the meeting
    }

func onWaitListParticipantRejected(participant: RtkRemoteParticipant) {
        // Called when a waitlisted participant is denied entry
    }

func onWaitListParticipantClosed(participant: RtkRemoteParticipant) {
        // Called when a waitlisted participant leaves the waiting room
    }
}

import {
    useRealtimeKitClient,
    useRealtimeKitSelector,
} from "@cloudflare/realtimekit-react-native";
import { View, Text, Button } from "react-native";

function WaitingRoomHost() {
    const [meeting] = useRealtimeKitClient();
    const waitlistedParticipants = useRealtimeKitSelector((m) =>
        m.participants.waitlisted.toArray(),
    );

const acceptParticipant = async (participantId) => {
        await meeting.participants.acceptWaitingRoomRequest(participantId);
    };

const rejectParticipant = async (participantId) => {
        await meeting.participants.rejectWaitingRoomRequest(participantId);
    };

return (
        <View>
            <Text>Waiting Room ({waitlistedParticipants.length})</Text>
            {waitlistedParticipants.map((participant) => (
                <View key={participant.id}>
                    <Text>{participant.name}</Text>
                    <Button
                        title="Accept"
                        onPress={() => acceptParticipant(participant.id)}
                    />
                    <Button
                        title="Reject"
                        onPress={() => rejectParticipant(participant.id)}
                    />
                </View>
            ))}
        </View>
    );
}

Best Practices

  • Provide Clear Feedback - Show users when they're in the waiting room and that they're waiting for approval
  • Set Expectations - Let users know their request is being reviewed
  • Handle Rejection Gracefully - Provide a friendly message if entry is rejected
  • Monitor State Changes - Subscribe to room state changes to update your UI accordingly
  • Check Permissions - Ensure your app has appropriate permissions configured in the preset to use waiting room features

Was this helpful?

YesNo

On this page

Waiting Room·续 - 图1Docs

{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/humans/core/waiting-room/#page","headline":"Waiting Room","description":"Control meeting access with a waiting room that requires host approval in RealtimeKit.","url":"https://developers.cloudflare.com/realtime/realtimekit/humans/core/waiting-room/","inLanguage":"en","image":"https://developers.cloudflare.com/realtime/realtimekit/humans/core/waiting-room/og.png?v=fb3d90a373c096ed","dateModified":"2026-10-19","publisher":{"@type":"Organization","name":"Cloudflare","description":"One platform for your apps, agents, and workforce. Build, secure, and scale without managing infrastructure","url":"https://www.cloudflare.com/","sameAs":["https://github.com/cloudflare","https://www.linkedin.com/company/cloudflare","https://x.com/cloudflare"],"logo":{"@type":"ImageObject","url":"https://developers.cloudflare.com/logo.svg"},"address":{"@type":"PostalAddress","streetAddress":"101 Townsend St","addressLocality":"San Francisco","addressRegion":"CA","postalCode":"94107","addressCountry":"US"},"contactPoint":[{"@type":"ContactPoint","contactType":"Customer Support","url":"https://support.cloudflare.com/","availableLanguage":["English"]},{"@type":"ContactPoint","contactType":"Sales","url":"https://www.cloudflare.com/contact/","availableLanguage":["English"]}]},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}

description: Choose between RealtimeKit UI Kit and Core SDK for your platform and framework. title: Select SDK(s) image: https://developers.cloudflare.com/realtime/realtimekit/humans/sdk-selection/og.png?v=ff55c764eede946f

Skip to content

Documentation Index
Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt
Use this file to discover all available pages before exploring further.