neoris/openvidu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

testapp: enhance webhook event handling

Browse Source
This commit is contained in:
Carlos Santos 2025-05-13 13:12:08 +02:00
parent 886fd5109b
commit 8993cab2e8
4 changed files with 98 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@ -57,3 +57,5 @@ backend/src/typings/
frontend/webcomponent/**/openvidu-meet.**.js
testapp/public/js/app.js
testapp/public/js/webcomponent.js
frontend/webcomponent/test-results/.last-run.json
frontend/webcomponent/test_localstorage_state.json

66
testapp/public/ts/webcomponent.ts
View File

@ -1,5 +1,13 @@
const socket = (window as any).io();
let meet: {
endMeeting: () => void;
leaveRoom: () => void;
on: (event: string, callback: (event: CustomEvent<any>) => void) => void;
};
let roomId: string | undefined;
let showAllWebhooksCheckbox: HTMLInputElement | null;
/**
* Add a component event to the events log
*/
@ -46,22 +54,42 @@ const clearWebhookEventsByRoom = (roomId: string): void => {
}
};
const shouldShowWebhook = (event: any): boolean => {
return showAllWebhooksCheckbox?.checked || event.data.roomId === roomId;
};
const listenWebhookServerEvents = () => {
socket.on('webhookEvent', (event: any) => {
console.log('Webhook received:', event);
const isMeetingEnded = event.event === 'meetingEnded';
const roomId = event.data.roomId;
if (roomId) {
saveWebhookEventToStorage(roomId, event);
const webhookRoomId = event.data.roomId;
if (webhookRoomId) {
saveWebhookEventToStorage(webhookRoomId, event);
}
if (!shouldShowWebhook(event)) {
console.log('Ignoring webhook event:', event);
return;
}
addWebhookEventElement(event);
// Clean up the previous events
if (isMeetingEnded) clearWebhookEventsByRoom(roomId);
const isMeetingEnded = event.event === 'meetingEnded';
if (isMeetingEnded) clearWebhookEventsByRoom(webhookRoomId);
});
};
const renderStoredWebhookEvents = (roomId: string) => {
const webhookLogList = document.getElementById('webhook-log-list');
if (webhookLogList) {
while (webhookLogList.firstChild) {
webhookLogList.removeChild(webhookLogList.firstChild);
}
}
const events = getWebhookEventsFromStorage(roomId);
events.forEach((event) => addWebhookEventElement(event));
};
const addWebhookEventElement = (event: any) => {
const webhookLogList = document.getElementById('webhook-log-list');
if (webhookLogList) {
@ -167,11 +195,15 @@ const listenWebComponentEvents = () => {
console.log('LEFT event received:', event);
addEventToLog('LEFT', JSON.stringify(event));
});
meet.on('MEETING_ENDED', (event: CustomEvent<any>) => {
console.log('MEETING_ENDED event received:', event);
addEventToLog('MEETING_ENDED', JSON.stringify(event));
});
};
// Set up commands for the web component
const setUpWebComponentCommands = () => {
const meet = document.querySelector('openvidu-meet') as any;
if (!meet) {
console.error('openvidu-meet component not found');
alert('openvidu-meet component not found in the DOM');
@ -189,21 +221,29 @@ const setUpWebComponentCommands = () => {
?.addEventListener('click', () => meet.leaveRoom());
// Toggle chat button click handler
document
.getElementById('toggle-chat-btn')
?.addEventListener('click', () => meet.toggleChat());
// document
// .getElementById('toggle-chat-btn')
// ?.addEventListener('click', () => meet.toggleChat());
};
document.addEventListener('DOMContentLoaded', () => {
const roomId = document.getElementById('room-id')?.textContent?.trim();
roomId = document.getElementById('room-id')?.textContent?.trim();
showAllWebhooksCheckbox = document.getElementById(
'show-all-webhooks'
) as HTMLInputElement;
meet = document.querySelector('openvidu-meet') as any;
if (!roomId) {
console.error('Room ID not found in the DOM');
alert('Room ID not found in the DOM');
return;
}
const events = getWebhookEventsFromStorage(roomId);
events.forEach((event) => addWebhookEventElement(event));
renderStoredWebhookEvents(roomId);
listenWebhookServerEvents();
listenWebComponentEvents();
setUpWebComponentCommands();
showAllWebhooksCheckbox?.addEventListener('change', () =>
renderStoredWebhookEvents(roomId)
);
});

24
testapp/public/views/index.mustache
View File

@ -84,6 +84,30 @@
</button>
</form>
</li>
{{! ONLY RECORDINGS LINK }}
<li>
<form action="/join-room" method="post">
<input
type="hidden"
name="roomUrl"
value="{{ publisherRoomUrl + '?viewRecordings=true' }}"
/>
<input
type="hidden"
name="participantRole"
value="publisher"
/>
<input
type="hidden"
name="roomId"
value="{{ roomId }}"
/>
<button type="submit" id="join-as-publisher" class="dropdown-item">
View Recordings
</button>
</form>
</li>
</ul>
</div>
</li>

26
testapp/public/views/room.mustache
View File

@ -19,12 +19,13 @@
<div id="control-panel" class="d-flex flex-column">
<span>
<span id="participant-role" class="h5">
{{#isModerator}}<span class="badge bg-success">Moderator</span
>{{/isModerator}}
{{^isModerator
{{#isModerator}}
<span class="badge bg-success">Moderator</span>
{{/isModerator}}
}}<span class="badge bg-secondary">Participant</span
>{{/isModerator}}
{{^isModerator}}
<span class="badge bg-secondary">Participant</span>
{{/isModerator}}
</span>
<span id="room-id" class="text-muted">
{{ roomId }}
@ -41,9 +42,9 @@
<button id="leave-room-btn" class="btn btn-warning">
Leave Room
</button>
<button id="toggle-chat-btn" class="btn btn-success">
<!-- <button id="toggle-chat-btn" class="btn btn-success">
Toggle Chat
</button>
</button> -->
</div>
<!-- Events -->
@ -57,6 +58,17 @@
<!-- Webhooks Log -->
<div class="section">
<h5 class="title">Webhook</h5>
<div class="form-check mb-2">
<input
class="form-check-input"
type="checkbox"
value=""
id="show-all-webhooks"
/>
<label class="form-check-label" for="show-all-webhooks">
Show all
</label>
</div>
<ul id="webhook-log-list" class="log-list">
<!-- Webhooks will be added dynamically here -->
</ul>