Switch from WebSocket to SSE+HTTP for browser compatibility

index.html

@@ -217,11 +217,11 @@
     <script type="module">
         import { oauthLoginUrl, oauthHandleRedirectIfPresent } from "https://cdn.jsdelivr.net/npm/@huggingface/hub@0.15.2/+esm";
 
-        // Central signaling server (same HF space owner)
-        const SIGNALING_SERVER = 'wss://cduss-reachy-mini-central.hf.space/ws';
+        // Central signaling server (HTTP/SSE instead of WebSocket)
+        const SIGNALING_SERVER = 'https://cduss-reachy-mini-central.hf.space';
 
         // State
-        let signalingWs = null;
+        let eventSource = null;
         let peerConnection = null;
         let dataChannel = null;
         let selectedProducerId = null;
@@ -328,50 +328,83 @@
             document.getElementById('logArea').innerHTML = '';
         }
 
-        // Signaling
+        // Send message to server via HTTP POST
+        async function sendToServer(message) {
+            if (!userToken) {
+                log('Not authenticated', 'error');
+                return null;
+            }
+
+            try {
+                const response = await fetch(`${SIGNALING_SERVER}/send?token=${encodeURIComponent(userToken)}`, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify(message)
+                });
+
+                if (!response.ok) {
+                    log(`Server error: ${response.status}`, 'error');
+                    return null;
+                }
+
+                return await response.json();
+            } catch (e) {
+                log(`Failed to send: ${e.message}`, 'error');
+                return null;
+            }
+        }
+
+        // Signaling via SSE
         function connectSignaling() {
             if (!userToken) {
                 log('Not authenticated', 'error');
                 return;
             }
 
-            const url = `${SIGNALING_SERVER}?token=${encodeURIComponent(userToken)}`;
-            log('Connecting to signaling server...');
+            const url = `${SIGNALING_SERVER}/events?token=${encodeURIComponent(userToken)}`;
+            log('Connecting to signaling server (SSE)...');
             updateSignalingStatus('connecting');
 
             try {
-                signalingWs = new WebSocket(url);
+                eventSource = new EventSource(url);
 
-                signalingWs.onopen = () => {
+                eventSource.onopen = () => {
                     log('Connected to signaling server!', 'success');
                     updateSignalingStatus('connected');
                     document.getElementById('connectBtn').disabled = true;
                     document.getElementById('disconnectBtn').disabled = false;
                 };
 
-                signalingWs.onmessage = (event) => {
-                    const msg = JSON.parse(event.data);
-                    log(`Received: ${msg.type}`);
-                    handleSignalingMessage(msg);
-                };
+                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);
+                    }
+                });
 
-                signalingWs.onerror = (error) => {
-                    log('WebSocket error', 'error');
-                };
+                eventSource.addEventListener('ping', () => {
+                    // Keepalive, ignore
+                });
 
-                signalingWs.onclose = (event) => {
-                    log(`Disconnected: code=${event.code}`);
-                    if (event.code === 4001) {
-                        log('Authentication failed - please sign in again', 'error');
-                        logout();
-                    }
+                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;
+                    }
                 };
+
             } catch (e) {
                 log(`Failed to connect: ${e.message}`, 'error');
                 updateSignalingStatus('disconnected');
@@ -379,10 +412,13 @@
         }
 
         function disconnectSignaling() {
-            if (signalingWs) {
-                signalingWs.close();
-                signalingWs = null;
+            if (eventSource) {
+                eventSource.close();
+                eventSource = null;
             }
+            updateSignalingStatus('disconnected');
+            document.getElementById('connectBtn').disabled = false;
+            document.getElementById('disconnectBtn').disabled = true;
             stopStream();
         }
 
@@ -393,19 +429,17 @@
             el.textContent = status.charAt(0).toUpperCase() + status.slice(1);
         }
 
-        function handleSignalingMessage(msg) {
+        async function handleSignalingMessage(msg) {
             switch (msg.type) {
                 case 'welcome':
                     myPeerId = msg.peerId;
                     log(`Connected as: ${myPeerId.substring(0, 8)}...`, 'success');
-                    // Register as listener to get producer announcements
-                    signalingWs.send(JSON.stringify({
+                    // Register as listener
+                    await sendToServer({
                         type: 'setPeerStatus',
                         roles: ['listener'],
                         meta: { name: 'WebRTC Dashboard' }
-                    }));
-                    // Request list of producers
-                    signalingWs.send(JSON.stringify({ type: 'list' }));
+                    });
                     break;
 
                 case 'list':
@@ -415,7 +449,10 @@
                 case 'peerStatusChanged':
                     log(`Robot ${msg.peerId.substring(0, 8)}... ${msg.roles?.length ? 'connected' : 'disconnected'}`);
                     // Refresh producer list
-                    signalingWs.send(JSON.stringify({ type: 'list' }));
+                    const listResponse = await sendToServer({ type: 'list' });
+                    if (listResponse && listResponse.producers) {
+                        displayProducers(listResponse.producers);
+                    }
                     break;
 
                 case 'sessionStarted':
@@ -488,9 +525,9 @@
                 }
             };
 
-            peerConnection.onicecandidate = (event) => {
+            peerConnection.onicecandidate = async (event) => {
                 if (event.candidate && currentSessionId) {
-                    signalingWs.send(JSON.stringify({
+                    await sendToServer({
                         type: 'peer',
                         sessionId: currentSessionId,
                         ice: {
@@ -498,7 +535,7 @@
                             sdpMLineIndex: event.candidate.sdpMLineIndex,
                             sdpMid: event.candidate.sdpMid
                         }
-                    }));
+                    });
                 }
             };
 
@@ -525,10 +562,15 @@
             };
 
             log('Requesting session with robot...');
-            signalingWs.send(JSON.stringify({
+            const response = await sendToServer({
                 type: 'startSession',
                 peerId: selectedProducerId
-            }));
+            });
+
+            if (response && response.sessionId) {
+                currentSessionId = response.sessionId;
+                log(`Session started: ${response.sessionId.substring(0, 8)}...`, 'success');
+            }
         }
 
         async function handlePeerMessage(msg) {
@@ -542,11 +584,11 @@
                     if (msg.sdp.type === 'offer') {
                         const answer = await peerConnection.createAnswer();
                         await peerConnection.setLocalDescription(answer);
-                        signalingWs.send(JSON.stringify({
+                        await sendToServer({
                             type: 'peer',
                             sessionId: currentSessionId,
                             sdp: { type: 'answer', sdp: answer.sdp }
-                        }));
+                        });
                         log('Sent SDP answer');
                     }
                 }