Update index.html

index.html

@@ -439,9 +439,14 @@
             }, 5000);
         }
 
-        async function setupWebRTC() {
+        async         function setupWebRTC() {
             const config = __RTC_CONFIGURATION__;
             peerConnection = new RTCPeerConnection(config);
+            
+            // 연결 재시도 메커니즘 추가
+            let retryCount = 0;
+            const maxRetries = 3;
+            
             const timeoutId = setTimeout(() => {
                 const toast = document.getElementById('error-toast');
                 toast.textContent = "연결이 평소보다 오래 걸리고 있습니다. VPN을 사용 중이신가요?";
@@ -495,6 +500,27 @@
                         clearTimeout(timeoutId);
                         const toast = document.getElementById('error-toast');
                         toast.style.display = 'none';
+                        retryCount = 0; // 연결 성공 시 재시도 카운트 초기화
+                    } else if (peerConnection.connectionState === 'failed' || peerConnection.connectionState === 'disconnected') {
+                        if (retryCount < maxRetries) {
+                            retryCount++;
+                            console.log(`연결 실패, 재시도 중... (${retryCount}/${maxRetries})`);
+                            
+                            // 현재 연결 정리
+                            if (peerConnection) {
+                                peerConnection.close();
+                            }
+                            
+                            // 잠시 후 재연결 시도
+                            setTimeout(() => {
+                                if (peerConnection.connectionState !== 'connected') {
+                                    showError(`연결 재시도 중... (${retryCount}/${maxRetries})`);
+                                    setupWebRTC();
+                                }
+                            }, 2000); // 2초 후 재시도
+                        } else {
+                            showError('연결에 실패했습니다. 브라우저를 새로고침 후 다시 시도해주세요.');
+                        }
                     }
                     updateButtonState();
                 });
@@ -517,11 +543,25 @@
                     return;
                 }
                 await peerConnection.setRemoteDescription(serverResponse);
+                // 이전 EventSource가 있으면 닫기
+                if (window.currentEventSource) {
+                    window.currentEventSource.close();
+                }
+                
                 const eventSource = new EventSource('/outputs?webrtc_id=' + webrtc_id);
+                window.currentEventSource = eventSource; // 전역으로 저장하여 나중에 정리할 수 있도록 함
+                
                 eventSource.addEventListener("output", (event) => {
                     const eventJson = JSON.parse(event.data);
                     addMessage("assistant", eventJson.content);
                 });
+                
+                eventSource.addEventListener("error", (event) => {
+                    console.error("EventSource 오류:", event);
+                    if (event.target.readyState === EventSource.CLOSED) {
+                        console.log("EventSource 연결이 닫혔습니다.");
+                    }
+                });
             } catch (err) {
                 clearTimeout(timeoutId);
                 console.error('Error setting up WebRTC:', err);
@@ -549,21 +589,35 @@
                 audioSource = null;
             }
             if (peerConnection) {
-                if (peerConnection.getTransceivers) {
-                    peerConnection.getTransceivers().forEach(transceiver => {
-                        if (transceiver.stop) {
-                            transceiver.stop();
-                        }
-                    });
-                }
-                if (peerConnection.getSenders) {
-                    peerConnection.getSenders().forEach(sender => {
-                        if (sender.track && sender.track.stop) sender.track.stop();
-                    });
+                try {
+                    if (peerConnection.getTransceivers) {
+                        peerConnection.getTransceivers().forEach(transceiver => {
+                            if (transceiver.stop) {
+                                transceiver.stop();
+                            }
+                        });
+                    }
+                    if (peerConnection.getSenders) {
+                        peerConnection.getSenders().forEach(sender => {
+                            if (sender.track && sender.track.stop) sender.track.stop();
+                        });
+                    }
+                    console.log('closing connection');
+                    peerConnection.close();
+                } catch (error) {
+                    console.error('Error during connection cleanup:', error);
                 }
-                console.log('closing');
-                peerConnection.close();
+                
+                // 클린업 진행 중 오류가 발생하더라도 null로 설정하여 새 연결이 가능하게 함
+                peerConnection = null;
+            }
+            
+            // EventSource 닫기 (있는 경우)
+            if (window.currentEventSource) {
+                window.currentEventSource.close();
+                window.currentEventSource = null;
             }
+            
             updateButtonState();
             audioLevel = 0;
         }