feat(visitors-list): Add to participant pane.

react/features/visitors/websocket-client.ts

@@ -147,4 +147,84 @@ export class WebsocketClient {
     get connectCount(): number {
         return this._connectCount;
     }
+
+    /**
+     * Connects to the visitors list with initial queue subscription, then switches to topic deltas.
+     *
+     * @param {string} queueServiceURL - The service URL to use.
+     * @param {string} queueEndpoint - The queue endpoint for initial list.
+     * @param {string} topicEndpoint - The topic endpoint for deltas.
+     * @param {Function} initialCallback - Callback executed with initial visitors list.
+     * @param {Function} deltaCallback - Callback executed with delta updates.
+     * @param {string} token - The token to be used for authorization.
+     * @param {Function?} connectCallback - Callback executed when connected.
+     * @returns {void}
+     */
+    connectVisitorsListWithInitial(queueServiceURL: string,
+            queueEndpoint: string,
+            topicEndpoint: string,
+            initialCallback: (visitors: Array<{ n: string; r: string; }>) => void,
+            deltaCallback: (updates: Array<{ n: string; r: string; s: string; }>) => void,
+            token: string | undefined,
+            connectCallback?: () => void) {
+        this.stompClient = new Client({
+            brokerURL: queueServiceURL,
+            forceBinaryWSFrames: true,
+            appendMissingNULLonIncoming: true
+        });
+
+        const errorConnecting = (error: any) => {
+            logger.error(`Error connecting to ${queueServiceURL} ${JSON.stringify(error)}`);
+        };
+
+        this.stompClient.onWebSocketError = errorConnecting;
+
+        this.stompClient.onStompError = frame => {
+            logger.error('STOMP error received', frame);
+            errorConnecting(frame.headers.message);
+        };
+
+        if (token) {
+            this.stompClient.connectHeaders = {
+                Authorization: `Bearer ${token}`
+            };
+        }
+
+        this.stompClient.onConnect = () => {
+            if (!this.stompClient) {
+                return;
+            }
+
+            logger.debug('Connected to visitors list websocket');
+            connectCallback?.();
+
+            // First subscribe to queue for initial list
+            const queueSubscription = this.stompClient.subscribe(queueEndpoint, message => {
+                try {
+                    const visitors: Array<{ n: string; r: string; }> = JSON.parse(message.body);
+
+                    logger.debug(`Received initial visitors list with ${visitors.length} visitors`);
+                    initialCallback(visitors);
+
+                    // Unsubscribe from queue and subscribe to topic for deltas
+                    queueSubscription.unsubscribe();
+                    this.stompClient?.subscribe(topicEndpoint, deltaMessage => {
+                        try {
+                            const updates: Array<{ n: string; r: string; s: string; }> = JSON.parse(deltaMessage.body);
+
+                            deltaCallback(updates);
+
+                        } catch (e) {
+                            logger.error(`Error parsing visitors delta response: ${deltaMessage}`, e);
+                        }
+                    });
+
+                } catch (e) {
+                    logger.error(`Error parsing initial visitors response: ${message}`, e);
+                }
+            });
+        };
+
+        this.stompClient.activate();
+    }
 }