Hey There, I am a frontend guy, now if I want to a...
# ask-ai
t
Hey There, I am a frontend guy, now if I want to attach an api to my button that will trigger participant_disconnect event handler, what's the way to do it
t
Thanks for reaching out, Om. I'm an AI assistant and I'm here to help. Give me a moment while I research this topic.
Thanks — I’m responding to your question about wiring a frontend button so it triggers the participant_disconnect handler. Short answer: you don’t fire the event directly. Disconnect the participant with the LiveKit client SDK (or have your backend remove a participant), and LiveKit will emit the participantDisconnected event to other clients. How to do it 1) If the button should make the current user leave (frontend): • Call
room.disconnect()
when the button is clicked. That terminates the local participant’s connection and LiveKit will emit
participantDisconnected
to other participants. Example (JavaScript/TypeScript):
Copy code
// assume `room` is your connected LiveKit Room instance
document.getElementById('leave-button')?.addEventListener('click', () => {
  room.disconnect(); // triggers participantDisconnected for others
});
2) If the button is in an admin dashboard and should remove another participant (backend-driven): • Have the button call your server API (authenticated). On the server use the server SDK’s remove/kick API (e.g.,
roomService.removeParticipant(roomName, identity)
). • That forces the target participant to disconnect and causes
participantDisconnected
to be emitted to other clients. 3) Listening for the event (on other clients):
Copy code
room.on('participantDisconnected', (participant) => {
  console.log('Participant disconnected:', participant.identity);
  // update UI, cleanup tracks, etc.
});
Key notes • The event is generated by LiveKit when a participant actually disconnects — you can’t manually synthesize the event from the client. • If you need an “instant” UI change on the admin who clicked the button, update that client’s UI immediately while the server-side removal proceeds; the event will propagate to everyone else. If you want, tell me which setup you’re using: • Are you implementing a self-leave button (client-side) or an admin “kick” (server-side)? • Which SDK/language are you using for the server (Node, Go, etc.)? I’ll give exact code snippets for your stack. Sources: client-sdk-js | livekit/livekit_composite | DeepWiki | server-sdk-js | livekit/livekit_composite | DeepWiki