tam 2

management/src/components/ProctorStreamPanels.tsx

@@ -33,6 +33,8 @@ export const ProctorStreamPanels: React.FC<ProctorStreamPanelsProps> = ({
   useEffect(() => {
     const wsUrl = getWsUrl('/ws?role=teacher');
     let retryTimer: ReturnType<typeof setTimeout> | null = null;
+    let pingTimer: ReturnType<typeof setInterval> | null = null;
+    let attempt = 0;
 
     intentionalClose.current = false;
     hasOpened.current = false;
@@ -50,6 +52,13 @@ export const ProctorStreamPanels: React.FC<ProctorStreamPanelsProps> = ({
       }
     };
 
+    const clearPing = () => {
+      if (pingTimer) {
+        clearInterval(pingTimer);
+        pingTimer = null;
+      }
+    };
+
     const connect = () => {
       if (intentionalClose.current) return;
 
@@ -57,15 +66,23 @@ export const ProctorStreamPanels: React.FC<ProctorStreamPanelsProps> = ({
       wsRef.current = ws;
 
       ws.onopen = () => {
+        attempt = 0;
         hasOpened.current = true;
         setStreaming(true);
         setErrorMessage(null);
         ws.send(JSON.stringify({ event: 'teacher:subscribe', data: { studentId } }));
+        clearPing();
+        pingTimer = setInterval(() => {
+          if (ws.readyState === WebSocket.OPEN) {
+            ws.send(JSON.stringify({ event: 'client:ping', data: {} }));
+          }
+        }, 15000);
       };
 
       ws.onmessage = (event) => {
         try {
           const msg = JSON.parse(event.data);
+          if (msg.event === 'client:pong') return;
           if (msg.event === 'teacher:screenshot-stream-frame' && msg.data.studentId === studentId) {
             setScreenFrame(msg.data.imageBuffer);
             markStreaming();
@@ -86,6 +103,7 @@ export const ProctorStreamPanels: React.FC<ProctorStreamPanelsProps> = ({
       ws.onerror = () => {};
 
       ws.onclose = () => {
+        clearPing();
         if (intentionalClose.current) return;
         setStreaming(false);
         if (!hasOpened.current && !hasFrames.current) {
@@ -93,7 +111,8 @@ export const ProctorStreamPanels: React.FC<ProctorStreamPanelsProps> = ({
         } else {
           setErrorMessage('Mất kết nối giám sát — đang thử lại...');
         }
-        retryTimer = setTimeout(connect, 3000);
+        const delay = Math.min(1000 * 2 ** Math.min(attempt++, 4), 10000);
+        retryTimer = setTimeout(connect, delay);
       };
     };
 
@@ -101,6 +120,7 @@ export const ProctorStreamPanels: React.FC<ProctorStreamPanelsProps> = ({
 
     return () => {
       intentionalClose.current = true;
+      clearPing();
       if (retryTimer) clearTimeout(retryTimer);
       if (wsRef.current?.readyState === WebSocket.OPEN) {
         wsRef.current.send(JSON.stringify({ event: 'teacher:unsubscribe', data: { studentId } }));