等候室功能允许主持人控制谁可以加入会议。启用该功能后，参与者在进入会议之前必须等待批准。
调用 meeting.join() 后，将发生以下两个事件之一：
roomJoined- 允许您立即加入会议waitlisted- 您被放入等候室，且必须等待主持人的批准
使用 meeting.self.roomState 来跟踪用户在会议中的状态。
join() (加入)
↓
[waitlisted] ←------ (host rejects / 主持人拒绝)
↓ ↓
(host accepts / [rejected] (被拒绝)
主持人接受)
↓
[joined] (已加入)当本地用户成功加入会议时触发。
监控本地用户何时加入会议：
import { useRealtimeKitSelector } from "@cloudflare/realtimekit-react";
import { useEffect } from "react";
function MeetingStatus() {
const roomState = useRealtimeKitSelector((m) => m.self.roomState);
const joined = roomState === "joined";
useEffect(() => {
if (joined) {
console.log("Successfully joined the meeting");
}
}, [joined]);
return joined ? <div>You are in the meeting</div> : null;
}或者使用事件监听器：
import { useRealtimeKitClient } from "@cloudflare/realtimekit-react";
useEffect(() => {
if (!meeting) return;
const handleRoomJoined = () => {
console.log("Successfully joined the meeting");
};
meeting.self.on("roomJoined", handleRoomJoined);
return () => {
meeting.self.off("roomJoined", handleRoomJoined);
};
}, [meeting]);meeting.self.on("roomJoined", () => {
// 本地用户已在会议中
console.log("Successfully joined the meeting");
});meeting.addMeetingRoomEventListener(object : RtkMeetingRoomEventListener {
override fun onMeetingRoomJoinCompleted(meeting: RealtimeKitClient) {
// 本地用户已在会议中
}
})extension MeetingViewModel: RtkMeetingRoomEventListener {
func onMeetingRoomJoinCompleted(meeting: RealtimeKitClient) {
// 本地用户已在会议中
}
}class MeetingRoomNotifier extends RtkMeetingRoomEventListener {
@override
void onMeetingRoomJoinCompleted() {
// 本地用户已在会议中
}
}
meeting.addMeetingRoomEventListener(MeetingRoomNotifier());监控本地用户何时加入会议：
import { useRealtimeKitSelector } from "@cloudflare/realtimekit-react-native";
import { useEffect } from "react";
function MeetingStatus() {
const roomState = useRealtimeKitSelector((m) => m.self.roomState);
const joined = roomState === "joined";
useEffect(() => {
if (joined) {
console.log("Successfully joined the meeting");
}
}, [joined]);
return joined ? <Text>You are in the meeting</Text> : null;
}或者使用事件监听器：
import { useRealtimeKitClient } from "@cloudflare/realtimekit-react-native";
useEffect(() => {
if (!meeting) return;
const handleRoomJoined = () => {
console.log("Successfully joined the meeting");
};
meeting.self.on("roomJoined", handleRoomJoined);
return () => {
meeting.self.off("roomJoined", handleRoomJoined);
};
}, [meeting]);当本地用户被放入等候室时触发。
监控本地用户何时在等候室中：
function WaitingRoomStatus() {
const roomState = useRealtimeKitSelector((m) => m.self.roomState);
const isWaitlisted = roomState === "waitlisted";
useEffect(() => {
if (isWaitlisted) {
console.log("You are in the waiting room");
}
}, [isWaitlisted]);
return isWaitlisted ? <div>Waiting for host approval...</div> : null;
}或者使用事件监听器：
useEffect(() => {
if (!meeting) return;
const handleWaitlisted = () => {
console.log("You are in the waiting room");
};
meeting.self.on("waitlisted", handleWaitlisted);
return () => {
meeting.self.off("waitlisted", handleWaitlisted);
};
}, [meeting]);meeting.self.on("waitlisted", () => {
// 本地用户已被列入候补名单
console.log("You are in the waiting room. Waiting for host approval...");
});meeting.addSelfEventListener(object : RtkSelfEventListener {
override fun onWaitListStatusUpdate(waitListStatus: WaitListStatus) {
when (waitListStatus) {
WAITING -> {
// 本地用户在等候室中
}
REJECTED -> {
// 本地用户的加入房间请求被主持人拒绝
}
NONE, ACCEPTED -> {
// 本地用户不在候补名单中，或者已被接受
}
}
}
})extension MeetingViewModel: RtkSelfEventListener {
func onWaitListStatusUpdate(waitListStatus: WaitListStatus) {
switch waitListStatus {
case .accepted:
// 本地用户的加入房间请求被主持人接受
case .waiting:
// 本地用户在等候室中
case .rejected:
// 本地用户的加入房间请求被主持人拒绝
default:
return .none
}
}
}class WaitingRoomNotifier extends RtkSelfEventListener {
@override
void onWaitListStatusUpdate(WaitlistStatus waitListStatus) {
switch (waitListStatus) {
case WaitlistStatus.waiting:
// 本地用户在等候室中
case WaitlistStatus.rejected:
// 本地用户的加入房间请求被主持人拒绝
case WaitlistStatus.accepted:
// 本地用户的加入房间请求被主持人接受
default:
break;
}
}
}
meeting.addSelfEventListener(WaitingRoomNotifier());监控本地用户何时在等候室中：
function WaitingRoomStatus() {
const roomState = useRealtimeKitSelector((m) => m.self.roomState);
const isWaitlisted = roomState === "waitlisted";
useEffect(() => {
if (isWaitlisted) {
console.log("You are in the waiting room");
}
}, [isWaitlisted]);
return isWaitlisted ? <Text>Waiting for host approval...</Text> : null;
}或者使用事件监听器：
useEffect(() => {
if (!meeting) return;
const handleWaitlisted = () => {
console.log("You are in the waiting room");
};
meeting.self.on("waitlisted", handleWaitlisted);
return () => {
meeting.self.off("waitlisted", handleWaitlisted);
};
}, [meeting]);当主持人拒绝准入请求时触发。
监控主持人何时拒绝准入请求：
function RejectionStatus() {
const roomState = useRealtimeKitSelector((m) => m.self.roomState);
const rejected = roomState === "rejected";
useEffect(() => {
if (rejected) {
console.log("Your entry request was rejected");
}
}, [rejected]);
return rejected ? <div>Your entry was rejected by the host</div> : null;
}或者使用事件监听器：
useEffect(() => {
if (!meeting) return;
const handleRoomLeft = ({ state }) => {
if (state === "rejected") {
console.log("Your entry request was rejected");
}
};
meeting.self.on("roomLeft", handleRoomLeft);
return () => {
meeting.self.off("roomLeft", handleRoomLeft);
};
}, [meeting]);meeting.self.on("roomLeft", ({ state }) => {
if (state === "rejected") {
// 主持人拒绝了准入请求
console.log("Your entry request was rejected");
}
});当主持人拒绝准入请求时，将触发 onWaitListStatusUpdate 回调，并带有 WaitListStatus.REJECTED：
meeting.addSelfEventListener(object : RtkSelfEventListener {
override fun onWaitListStatusUpdate(waitListStatus: WaitListStatus) {
when (waitListStatus) {
WaitListStatus.REJECTED -> {
// 本地用户的加入房间请求被主持人拒绝
Log.d("WaitingRoom", "Your entry request was rejected")
}
WaitListStatus.WAITING -> {
// 本地用户在等候室中
}
WaitListStatus.ACCEPTED, WaitListStatus.NONE -> {
// 本地用户已被接受或不在等候名单中
}
}
}
})当主持人拒绝准入请求时，将触发 onWaitListStatusUpdate 回调，并带有 WaitListStatus.rejected：
extension MeetingViewModel: RtkSelfEventListener {
func onWaitListStatusUpdate(waitListStatus: WaitListStatus) {
switch waitListStatus {
case .rejected:
// 本地用户的加入房间请求被主持人拒绝
print("Your entry request was rejected")
case .waiting:
// 本地用户在等候室中
break
case .accepted:
// 本地用户的加入房间请求被主持人接受
break
default:
break
}
}
}当主持人拒绝准入请求时，将触发 onWaitListStatusUpdate 回调，并带有 WaitlistStatus.rejected：
class WaitingRoomNotifier extends RtkSelfEventListener {
@override
void onWaitListStatusUpdate(WaitlistStatus waitListStatus) {
switch (waitListStatus) {
case WaitlistStatus.rejected:
// 本地用户的加入房间请求被主持人拒绝
print("Your entry request was rejected");
case WaitlistStatus.waiting:
// 本地用户在等候室中
break;
case WaitlistStatus.accepted:
// 本地用户的加入房间请求被主持人接受
break;
default:
break;
}
}
}
meeting.addSelfEventListener(WaitingRoomNotifier());监控主持人何时拒绝准入请求：
function RejectionStatus() {
const roomState = useRealtimeKitSelector((m) => m.self.roomState);
const rejected = roomState === "rejected";
useEffect(() => {
if (rejected) {
console.log("Your entry request was rejected");
}
}, [rejected]);
return rejected ? <Text>Your entry was rejected by the host</Text> : null;
}或者使用事件监听器：
useEffect(() => {
if (!meeting) return;
const handleRoomLeft = ({ state }) => {
if (state === "rejected") {
console.log("Your entry request was rejected");
}
};
meeting.self.on("roomLeft", handleRoomLeft);
return () => {
meeting.self.off("roomLeft", handleRoomLeft);
};
}, [meeting]);您也可以直接检查当前房间状态。
在一个组件中处理所有等候室状态：
function WaitingRoomManager() {
const roomState = useRealtimeKitSelector((m) => m.self.roomState);
switch (roomState) {
case "init":
return <div>Connecting...</div>;
case "waitlisted":
return <div>Waiting for host approval...</div>;
case "joined":
return <div>You are in the meeting</div>;
case "rejected":
return <div>Your entry was rejected</div>;
case "left":
return <div>You left the meeting</div>;
case "kicked":
return <div>You were removed from the meeting</div>;
case "ended":
return <div>The meeting has ended</div>;
case "disconnected":
return <div>Connection lost</div>;
default:
return null;
}
}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");
}使用上面显示的事件监听器来监控状态变化。
使用上面显示的事件监听器来监控状态变化。
使用上面显示的事件监听器来监控状态变化。
在一个组件中处理所有等候室状态：
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;
}
}主持人可以使用参与者管理方法来管理等候室请求。有关以下内容的详细信息，请参阅远程参与者：
acceptWaitingRoomRequest(participantId)- 接受来自等候室的参与者rejectWaitingRoomRequest(participantId)- 拒绝参与者的准入请求
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>
);
}// 获取等候室参与者
const waitlistedParticipants = meeting.participants.waitlisted.toArray();
// 接受第一个等候室参与者
if (waitlistedParticipants.length > 0) {
const participantId = waitlistedParticipants[0].id;
await meeting.participants.acceptWaitingRoomRequest(participantId);
}// 获取等候室参与者
val waitlistedParticipants = meeting.participants.waitlisted
// 接受等候室中的参与者
if (waitlistedParticipants.isNotEmpty()) {
val participant = waitlistedParticipants[0]
meeting.participants.acceptWaitingRoomRequest(participant.id)
}
// 拒绝参与者的准入请求
if (waitlistedParticipants.isNotEmpty()) {
val participant = waitlistedParticipants[0]
meeting.participants.rejectWaitingRoomRequest(participant.id)
}
// 监听等候室事件
meeting.addWaitlistEventListener(object : RtkWaitlistEventListener {
override fun onWaitListParticipantJoined(participant: RtkRemoteParticipant) {
// 当新参与者加入等候室时调用
}
override fun onWaitListParticipantAccepted(participant: RtkRemoteParticipant) {
// 当候补参与者被接受进入会议时调用
}
override fun onWaitListParticipantRejected(participant: RtkRemoteParticipant) {
// 当候补参与者被拒绝进入会议时调用
}
override fun onWaitListParticipantClosed(participant: RtkRemoteParticipant) {
// 当候补参与者离开等候室时调用
}
})// 获取等候室参与者
let waitlistedParticipants = meeting.participants.waitlisted
// 接受等候室中的参与者
if let participant = waitlistedParticipants.first {
meeting.participants.acceptWaitingRoomRequest(id: participant.id)
}
// 拒绝参与者的准入请求
if let participant = waitlistedParticipants.first {
meeting.participants.rejectWaitingRoomRequest(participant.id)
}
// 监听等候室事件
extension MeetingViewModel: RtkWaitlistEventListener {
func onWaitListParticipantJoined(participant: RtkRemoteParticipant) {
// 当新参与者加入等候室时调用
}
func onWaitListParticipantAccepted(participant: RtkRemoteParticipant) {
// 当候补参与者被接受进入会议时调用
}
func onWaitListParticipantRejected(participant: RtkRemoteParticipant) {
// 当候补参与者被拒绝进入会议时调用
}
func onWaitListParticipantClosed(participant: RtkRemoteParticipant) {
// 当候补参与者离开等候室时调用
}
}// 获取等候室参与者
final waitlistedParticipants = meeting.participants.waitlisted;
// 接受等候室中的参与者
if (waitlistedParticipants.isNotEmpty) {
final participant = waitlistedParticipants[0];
meeting.participants.acceptWaitlistedParticipant(participant);
}
// 拒绝参与者的准入请求
if (waitlistedParticipants.isNotEmpty) {
final participant = waitlistedParticipants[0];
meeting.participants.rejectWaitlistedParticipant(participant);
}
// 一次性接受所有等候室参与者
meeting.participants.acceptAllWaitingRoomRequests();
// 监听等候室事件
class WaitlistStatusNotifier extends RtkWaitlistEventListener {
@override
void onWaitListParticipantJoined(RtkRemoteParticipant participant) {
// 当新参与者加入等候室时调用
}
@override
void onWaitListParticipantAccepted(RtkRemoteParticipant participant) {
// 当候补参与者被接受进入会议时调用
}
@override
void onWaitListParticipantRejected(RtkRemoteParticipant participant) {
// 当候补参与者被拒绝进入会议时调用
}
@override
void onWaitListParticipantClosed(RtkRemoteParticipant participant) {
// 当候补参与者离开等候室时调用
}
}
meeting.addWaitlistEventListener(WaitlistStatusNotifier());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>
);
}- 提供清晰的反馈 - 在用户进入等候室并等待批准时向其显示相关提示。
- 建立合理预期 - 让用户知道他们的请求正在审核中。
- 友好地处理拒绝 - 如果准入请求被拒绝，请提供友好的提示信息。
- 监控状态变化 - 订阅房间状态变化以相应地更新您的用户界面（UI）。
- 检查权限 - 确保您的应用程序在预设中配置了适当的权限以使用等候室功能。