Use fetch-based SSE with Authorization headers for private Space

Switch from EventSource to fetch with ReadableStream for SSE connection.
This allows adding Authorization headers which are required for private
HuggingFace Spaces.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

index.html

@@ -221,7 +221,6 @@
         const SIGNALING_SERVER = 'https://cduss-reachy-mini-central.hf.space';
 
         // State
-        let eventSource = null;
         let peerConnection = null;
         let dataChannel = null;
         let selectedProducerId = null;
@@ -338,7 +337,10 @@
             try {
                 const response = await fetch(`${SIGNALING_SERVER}/send?token=${encodeURIComponent(userToken)}`, {
                     method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'Authorization': `Bearer ${userToken}`,
+                    },
                     body: JSON.stringify(message)
                 });
 
@@ -354,8 +356,10 @@
             }
         }
 
-        // Signaling via SSE
-        function connectSignaling() {
+        // Signaling via SSE (using fetch for header support)
+        let sseAbortController = null;
+
+        async function connectSignaling() {
             if (!userToken) {
                 log('Not authenticated', 'error');
                 return;
@@ -365,56 +369,75 @@
             log('Connecting to signaling server (SSE)...');
             updateSignalingStatus('connecting');
 
+            sseAbortController = new AbortController();
+
             try {
-                eventSource = new EventSource(url);
-
-                eventSource.onopen = () => {
-                    log('Connected to signaling server!', 'success');
-                    updateSignalingStatus('connected');
-                    document.getElementById('connectBtn').disabled = true;
-                    document.getElementById('disconnectBtn').disabled = false;
-                };
-
-                eventSource.addEventListener('message', (event) => {
-                    try {
-                        const msg = JSON.parse(event.data);
-                        log(`Received: ${msg.type}`);
-                        handleSignalingMessage(msg);
-                    } catch (e) {
-                        console.error('Failed to parse message:', e);
-                    }
+                const response = await fetch(url, {
+                    method: 'GET',
+                    headers: {
+                        'Authorization': `Bearer ${userToken}`,
+                        'Accept': 'text/event-stream',
+                    },
+                    signal: sseAbortController.signal,
                 });
 
-                eventSource.addEventListener('ping', () => {
-                    // Keepalive, ignore
-                });
+                if (!response.ok) {
+                    throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+                }
 
-                eventSource.onerror = (error) => {
-                    log('Connection error', 'error');
-                    updateSignalingStatus('disconnected');
-                    document.getElementById('connectBtn').disabled = false;
-                    document.getElementById('disconnectBtn').disabled = true;
-                    document.getElementById('startStreamBtn').disabled = true;
-                    selectedProducerId = null;
-                    myPeerId = null;
-
-                    // Auto-reconnect after 5 seconds
-                    if (eventSource) {
-                        eventSource.close();
-                        eventSource = null;
+                log('Connected to signaling server!', 'success');
+                updateSignalingStatus('connected');
+                document.getElementById('connectBtn').disabled = true;
+                document.getElementById('disconnectBtn').disabled = false;
+
+                // Read the SSE stream
+                const reader = response.body.getReader();
+                const decoder = new TextDecoder();
+                let buffer = '';
+
+                while (true) {
+                    const { done, value } = await reader.read();
+                    if (done) break;
+
+                    buffer += decoder.decode(value, { stream: true });
+                    const lines = buffer.split('\n');
+                    buffer = lines.pop(); // Keep incomplete line in buffer
+
+                    for (const line of lines) {
+                        if (line.startsWith('data:')) {
+                            const data = line.slice(5).trim();
+                            if (data) {
+                                try {
+                                    const msg = JSON.parse(data);
+                                    log(`Received: ${msg.type}`);
+                                    handleSignalingMessage(msg);
+                                } catch (e) {
+                                    console.error('Failed to parse:', data, e);
+                                }
+                            }
+                        }
                     }
-                };
+                }
 
             } catch (e) {
-                log(`Failed to connect: ${e.message}`, 'error');
+                if (e.name === 'AbortError') {
+                    log('Disconnected', 'info');
+                } else {
+                    log(`Connection error: ${e.message}`, 'error');
+                }
                 updateSignalingStatus('disconnected');
+                document.getElementById('connectBtn').disabled = false;
+                document.getElementById('disconnectBtn').disabled = true;
+                document.getElementById('startStreamBtn').disabled = true;
+                selectedProducerId = null;
+                myPeerId = null;
             }
         }
 
         function disconnectSignaling() {
-            if (eventSource) {
-                eventSource.close();
-                eventSource = null;
+            if (sseAbortController) {
+                sseAbortController.abort();
+                sseAbortController = null;
             }
             updateSignalingStatus('disconnected');
             document.getElementById('connectBtn').disabled = false;