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

testapp: enhance webhook event handling and storage; update room ID handling in forms

Browse Source
This commit is contained in:
Carlos Santos 2025-05-12 12:57:33 +02:00
parent 8a6066a87c
commit 6a8bae5dec
6 changed files with 168 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
testapp/package.json
View File

@ -7,7 +7,7 @@
"build": "tsc",
"build:watch": "tsc --watch",
"start": "node dist/index.js",
"dev:server": "ts-node-dev --respawn --watch src,public/ts src/index.ts",
"dev:server": "ts-node-dev --respawn --watch src,public/ts,public/views src/index.ts",
"dev": "concurrently \"npm:watch:client\" \"npm run dev:server\" --kill-others",
"build:client": "tsc -p tsconfig.client.json",
"watch:client": "tsc -p tsconfig.client.json --watch"

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

@ -7,6 +7,7 @@ const addEventToLog = (eventType: string, eventMessage: string): void => {
const eventsList = document.getElementById('events-list');
if (eventsList) {
const li = document.createElement('li');
li.className = `event-${eventType}`;
li.textContent = `[ ${eventType} ] : ${eventMessage}`;
eventsList.appendChild(li);
}
@ -19,97 +20,135 @@ const escapeHtml = (unsafe: string): string => {
.replace(/"/g, '"')
.replace(/'/g, ''');
};
const getWebhookEventsFromStorage = (roomId: string): any[] => {
const data = localStorage.getItem('webhookEventsByRoom');
if (!data) return [];
const map = JSON.parse(data);
return map[roomId] || [];
};
const saveWebhookEventToStorage = (roomId: string, event: any): void => {
const data = localStorage.getItem('webhookEventsByRoom');
const map = data ? JSON.parse(data) : {};
if (!map[roomId]) map[roomId] = [];
map[roomId].push(event);
localStorage.setItem('webhookEventsByRoom', JSON.stringify(map));
};
const clearWebhookEventsByRoom = (roomId: string): void => {
const data = localStorage.getItem('webhookEventsByRoom');
if (!data) return;
const map = JSON.parse(data);
if (map[roomId]) {
map[roomId] = [];
localStorage.setItem('webhookEventsByRoom', JSON.stringify(map));
}
};
const listenWebhookServerEvents = () => {
socket.on('webhookEvent', (payload: any) => {
console.log('Webhook received:', payload);
const webhookLogList = document.getElementById('webhook-log-list');
if (webhookLogList) {
// Create unique IDs for this accordion item
const itemId = payload.creationDate;
const headerId = `header-${itemId}`;
const collapseId = `collapse-${itemId}`;
// Create accordion item container
const accordionItem = document.createElement('div');
accordionItem.className = 'accordion-item';
// Create header
const header = document.createElement('h2');
header.className = 'accordion-header';
header.id = headerId;
// Create header button
const button = document.createElement('button');
button.className = 'accordion-button';
button.type = 'button';
button.setAttribute('data-bs-toggle', 'collapse');
button.setAttribute('data-bs-target', `#${collapseId}`);
button.setAttribute('aria-expanded', 'true');
button.setAttribute('aria-controls', collapseId);
button.style.padding = '10px';
if (payload.event === 'meetingStarted') {
button.classList.add('bg-success');
}
if (payload.event === 'meetingEnded') {
button.classList.add('bg-danger');
}
if (payload.event.includes('recording')) {
button.classList.add('bg-warning');
}
// Format the header text with event name and timestamp
const date = new Date(payload.creationDate);
const formattedDate = date.toLocaleString('es-ES', {
// year: 'numeric',
// month: '2-digit',
// day: '2-digit',
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
hour12: false,
});
button.innerHTML = `[${formattedDate}] <strong>${payload.event}</strong>`;
// Create collapsible content container
const collapseDiv = document.createElement('div');
collapseDiv.id = collapseId;
collapseDiv.className = 'accordion-collapse collapse';
collapseDiv.setAttribute('aria-labelledby', headerId);
collapseDiv.setAttribute('data-bs-parent', '#webhook-log-list');
// Create body content
const bodyDiv = document.createElement('div');
bodyDiv.className = 'accordion-body';
// Format JSON with syntax highlighting if possible
const formattedJson = JSON.stringify(payload, null, 2);
bodyDiv.innerHTML = `<pre class="mb-0"><code>${escapeHtml(
formattedJson
)}</code></pre>`;
// Assemble the components
header.appendChild(button);
collapseDiv.appendChild(bodyDiv);
accordionItem.appendChild(header);
accordionItem.appendChild(collapseDiv);
// Insert at the top of the list (latest events first)
if (webhookLogList.firstChild) {
webhookLogList.insertBefore(accordionItem, webhookLogList.firstChild);
} else {
webhookLogList.appendChild(accordionItem);
}
// Limit the number of items to prevent performance issues
const maxItems = 50;
while (webhookLogList.children.length > maxItems) {
webhookLogList.removeChild(webhookLogList.lastChild!);
}
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);
}
addWebhookEventElement(event);
// Clean up the previous events
if (isMeetingEnded) clearWebhookEventsByRoom(roomId);
});
};
const addWebhookEventElement = (event: any) => {
const webhookLogList = document.getElementById('webhook-log-list');
if (webhookLogList) {
// Create unique IDs for this accordion item
const itemId = event.creationDate;
const headerClassName = `webhook-${event.event}`;
const collapseId = `collapse-${itemId}`;
// Create accordion item container
const accordionItem = document.createElement('div');
accordionItem.className = 'accordion-item';
// Create header
const header = document.createElement('h2');
header.classList.add(headerClassName, 'accordion-header');
// Create header button
const button = document.createElement('button');
button.className = 'accordion-button';
button.type = 'button';
button.setAttribute('data-bs-toggle', 'collapse');
button.setAttribute('data-bs-target', `#${collapseId}`);
button.setAttribute('aria-expanded', 'true');
button.setAttribute('aria-controls', collapseId);
button.style.padding = '10px';
if (event.event === 'meetingStarted') {
button.classList.add('bg-success');
}
if (event.event === 'meetingEnded') {
button.classList.add('bg-danger');
}
if (event.event.includes('recording')) {
button.classList.add('bg-warning');
}
// Format the header text with event name and timestamp
const date = new Date(event.creationDate);
const formattedDate = date.toLocaleString('es-ES', {
// year: 'numeric',
// month: '2-digit',
// day: '2-digit',
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
hour12: false,
});
button.innerHTML = `[${formattedDate}] <strong>${event.event}</strong>`;
// Create collapsible content container
const collapseDiv = document.createElement('div');
collapseDiv.id = collapseId;
collapseDiv.className = 'accordion-collapse collapse';
collapseDiv.setAttribute('aria-labelledby', headerClassName);
collapseDiv.setAttribute('data-bs-parent', '#webhook-log-list');
// Create body content
const bodyDiv = document.createElement('div');
bodyDiv.className = 'accordion-body';
// Format JSON with syntax highlighting if possible
const formattedJson = JSON.stringify(event, null, 2);
bodyDiv.innerHTML = `<pre class="mb-0"><code>${escapeHtml(
formattedJson
)}</code></pre>`;
// Assemble the components
header.appendChild(button);
collapseDiv.appendChild(bodyDiv);
accordionItem.appendChild(header);
accordionItem.appendChild(collapseDiv);
// Insert at the top of the list (latest events first)
if (webhookLogList.firstChild) {
webhookLogList.insertBefore(accordionItem, webhookLogList.firstChild);
} else {
webhookLogList.appendChild(accordionItem);
}
// Limit the number of items to prevent performance issues
const maxItems = 50;
while (webhookLogList.children.length > maxItems) {
webhookLogList.removeChild(webhookLogList.lastChild!);
}
}
};
// Listen to events from openvidu-meet
const listenWebComponentEvents = () => {
@ -156,6 +195,14 @@ const setUpWebComponentCommands = () => {
};
document.addEventListener('DOMContentLoaded', () => {
const roomId = document.getElementById('room-id')?.textContent?.trim();
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));
listenWebhookServerEvents();
listenWebComponentEvents();
setUpWebComponentCommands();

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

@ -50,6 +50,11 @@
name="participantRole"
value="moderator"
/>
<input
type="hidden"
name="roomId"
value="{{ roomId }}"
/>
<button type="submit" id="join-as-moderator" class="dropdown-item">
Moderator
@ -68,6 +73,11 @@
name="participantRole"
value="publisher"
/>
<input
type="hidden"
name="roomId"
value="{{ roomId }}"
/>
<button type="submit" id="join-as-publisher" class="dropdown-item">
Publisher
@ -93,7 +103,7 @@
<form action="/room" method="post">
<div class="mb-3">
<label for="room-id-prefix" class="form-label">Room Prefix</label>
<label for="room-id-prefix" class="form-label">Room Prefix *</label>
<input
type="text"
name="roomIdPrefix"

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

@ -17,14 +17,30 @@
<div class="container-fluid">
<!-- Left Sidebar Panel -->
<div id="control-panel" class="d-flex flex-column">
<h3>{{ participantRole }}</h3>
<span>
<span id="participant-role" class="h5">
{{#isModerator}}<span class="badge bg-success">Moderator</span
>{{/isModerator}}
{{^isModerator
}}<span class="badge bg-secondary">Participant</span
>{{/isModerator}}
</span>
<span id="room-id" class="text-muted">
{{ roomId }}
</span>
</span>
<!-- Commands -->
<div class="section">
<h5 class="title">Commands</h5>
{{#isModerator}}
<button id="end-meeting-btn" class="btn btn-danger">End Meeting</button>
<button id="end-meeting-btn" class="btn btn-danger">
End Meeting
</button>
{{/isModerator}}
<button id="leave-room-btn" class="btn btn-warning">Leave Room</button>
<button id="leave-room-btn" class="btn btn-warning">
Leave Room
</button>
<button id="toggle-chat-btn" class="btn btn-success">
Toggle Chat
</button>

3
testapp/src/controllers/roomController.ts
View File

@ -7,6 +7,7 @@ import { MeetWebhookEvent } from '../../../typings/src/webhook.model';
interface JoinRoomRequest {
participantRole: ParticipantRole;
roomUrl: string;
roomId: string;
participantName?: string;
}
@ -15,6 +16,7 @@ export const joinRoom = (req: Request, res: Response) => {
const {
participantRole,
roomUrl,
roomId,
participantName = 'User',
} = req.body as JoinRoomRequest;
if (!roomUrl) {
@ -24,6 +26,7 @@ export const joinRoom = (req: Request, res: Response) => {
roomUrl,
participantRole,
participantName,
roomId,
isModerator: participantRole === 'moderator',
});
} catch (error) {

2
testapp/src/index.ts
View File

@ -44,5 +44,5 @@ server.listen(PORT, () => {
console.log(`Meet API URL: ${configService.meetApiUrl}`);
console.log('-----------------------------------------');
console.log('');
console.log('Visit http://localhost:3000/ to access the app');
console.log(`Visit http://localhost:${PORT}/ to access the app`);
});