tam

2026-07-13 08:12:04 +07:00
parent 2bb856f2fd
commit 719704f19e
4 changed files with 215 additions and 93 deletions
--- a/management/src/components/ExamGridProctor.tsx
+++ b/management/src/components/ExamGridProctor.tsx
@@ -22,73 +22,107 @@ export const ExamGridProctor: React.FC<ExamGridProctorProps> = ({
  const [isFullscreen, setIsFullscreen] = useState<boolean>(false);

  const wsRef = useRef<WebSocket | null>(null);
+  const subscribedRef = useRef<Set<number>>(new Set());
  const gridContainerRef = useRef<HTMLDivElement>(null);

  const studentIdsString = useMemo(
    () => students.map((s) => s.studentRkId).join(','),
    [students]
  );
+  const onlineKey = useMemo(() => onlineIds.join(','), [onlineIds]);
+
+  const syncSubscriptions = (ws: WebSocket) => {
+    if (ws.readyState !== WebSocket.OPEN) return;
+    const target = new Set(onlineIds);
+    const prev = subscribedRef.current;
+
+    prev.forEach((id) => {
+      if (!target.has(id)) {
+        ws.send(JSON.stringify({ event: 'teacher:unsubscribe', data: { studentId: id } }));
+        prev.delete(id);
+      }
+    });
+    onlineIds.forEach((id) => {
+      if (!prev.has(id)) {
+        ws.send(JSON.stringify({ event: 'teacher:subscribe', data: { studentId: id } }));
+        prev.add(id);
+      }
+    });
+  };

  useEffect(() => {
    if (students.length === 0) return;

    const wsUrl = getWsUrl('/ws?role=teacher');
-    const ws = new WebSocket(wsUrl);
-    wsRef.current = ws;
+    let closed = false;
+    let retryTimer: ReturnType<typeof setTimeout> | null = null;

-    ws.onopen = () => {
-      students.forEach((s) => {
-        ws.send(
-          JSON.stringify({
-            event: 'teacher:subscribe',
-            data: { studentId: s.studentRkId },
-          })
-        );
-      });
-    };
+    const connect = () => {
+      if (closed) return;

-    ws.onmessage = (event) => {
-      try {
-        const msg = JSON.parse(event.data);
-        if (msg.event === 'teacher:screenshot-stream-frame') {
-          const { studentId, imageBuffer } = msg.data;
-          setScreenFrames((prev) => ({ ...prev, [studentId]: imageBuffer }));
-        } else if (msg.event === 'teacher:webcam-stream-frame') {
-          const { studentId, imageBuffer } = msg.data;
-          setWebcamFrames((prev) => ({ ...prev, [studentId]: imageBuffer }));
-        } else if (msg.event === 'teacher:stream-stopped') {
-          const { studentId } = msg.data;
-          setScreenFrames((prev) => {
-            const next = { ...prev };
-            delete next[studentId];
-            return next;
-          });
-          setWebcamFrames((prev) => {
-            const next = { ...prev };
-            delete next[studentId];
-            return next;
-          });
+      const ws = new WebSocket(wsUrl);
+      wsRef.current = ws;
+      subscribedRef.current = new Set();
+
+      ws.onopen = () => syncSubscriptions(ws);
+
+      ws.onmessage = (event) => {
+        try {
+          const msg = JSON.parse(event.data);
+          if (msg.event === 'teacher:screenshot-stream-frame') {
+            const { studentId, imageBuffer } = msg.data;
+            setScreenFrames((prev) => ({ ...prev, [studentId]: imageBuffer }));
+          } else if (msg.event === 'teacher:webcam-stream-frame') {
+            const { studentId, imageBuffer } = msg.data;
+            setWebcamFrames((prev) => ({ ...prev, [studentId]: imageBuffer }));
+          } else if (msg.event === 'teacher:stream-stopped') {
+            const { studentId } = msg.data;
+            setScreenFrames((prev) => {
+              const next = { ...prev };
+              delete next[studentId];
+              return next;
+            });
+            setWebcamFrames((prev) => {
+              const next = { ...prev };
+              delete next[studentId];
+              return next;
+            });
+          }
+        } catch (err) {
+          console.error('Error parsing WS message in grid view:', err);
        }
-      } catch (err) {
-        console.error('Error parsing WS message in grid view:', err);
-      }
+      };
+
+      ws.onclose = () => {
+        subscribedRef.current = new Set();
+        if (!closed) {
+          retryTimer = setTimeout(connect, 3000);
+        }
+      };
    };

+    connect();
+
    return () => {
-      if (ws.readyState === WebSocket.OPEN) {
-        students.forEach((s) => {
-          ws.send(
-            JSON.stringify({
-              event: 'teacher:unsubscribe',
-              data: { studentId: s.studentRkId },
-            })
-          );
+      closed = true;
+      if (retryTimer) clearTimeout(retryTimer);
+      const ws = wsRef.current;
+      if (ws?.readyState === WebSocket.OPEN) {
+        subscribedRef.current.forEach((id) => {
+          ws.send(JSON.stringify({ event: 'teacher:unsubscribe', data: { studentId: id } }));
        });
      }
-      ws.close();
+      ws?.close();
+      wsRef.current = null;
+      subscribedRef.current = new Set();
    };
  }, [studentIdsString]);

+  useEffect(() => {
+    const ws = wsRef.current;
+    if (ws) syncSubscriptions(ws);
+  }, [onlineKey]);
+
  // Clean up frames when students are removed or go offline
  useEffect(() => {
    setScreenFrames((prev) => {
--- a/management/src/components/ProctorStreamPanels.tsx
+++ b/management/src/components/ProctorStreamPanels.tsx
@@ -32,6 +32,7 @@ export const ProctorStreamPanels: React.FC<ProctorStreamPanelsProps> = ({

  useEffect(() => {
    const wsUrl = getWsUrl('/ws?role=teacher');
+    let retryTimer: ReturnType<typeof setTimeout> | null = null;

    intentionalClose.current = false;
    hasOpened.current = false;
@@ -41,9 +42,6 @@ export const ProctorStreamPanels: React.FC<ProctorStreamPanelsProps> = ({
    setScreenFrame(null);
    setWebcamFrame(null);

-    const ws = new WebSocket(wsUrl);
-    wsRef.current = ws;
-
    const markStreaming = () => {
      if (!hasFrames.current) {
        hasFrames.current = true;
@@ -52,48 +50,63 @@ export const ProctorStreamPanels: React.FC<ProctorStreamPanelsProps> = ({
      }
    };

-    ws.onopen = () => {
-      hasOpened.current = true;
-      setStreaming(true);
-      ws.send(JSON.stringify({ event: 'teacher:subscribe', data: { studentId } }));
-    };
-
-    ws.onmessage = (event) => {
-      try {
-        const msg = JSON.parse(event.data);
-        if (msg.event === 'teacher:screenshot-stream-frame' && msg.data.studentId === studentId) {
-          setScreenFrame(msg.data.imageBuffer);
-          markStreaming();
-        } else if (msg.event === 'teacher:webcam-stream-frame' && msg.data.studentId === studentId) {
-          setWebcamFrame(msg.data.imageBuffer);
-          markStreaming();
-        } else if (msg.event === 'teacher:stream-stopped' && msg.data.studentId === studentId) {
-          setScreenFrame(null);
-          setWebcamFrame(null);
-          setStreaming(false);
-          setErrorMessage('Sinh viên đã dừng stream');
-        }
-      } catch (err) {
-        console.error('Error parsing WS frame:', err);
-      }
-    };
-
-    ws.onerror = () => {};
-
-    ws.onclose = () => {
+    const connect = () => {
      if (intentionalClose.current) return;
-      setStreaming(false);
-      if (!hasOpened.current && !hasFrames.current) {
-        setErrorMessage('Không thể kết nối máy chủ giám sát');
-      }
+
+      const ws = new WebSocket(wsUrl);
+      wsRef.current = ws;
+
+      ws.onopen = () => {
+        hasOpened.current = true;
+        setStreaming(true);
+        setErrorMessage(null);
+        ws.send(JSON.stringify({ event: 'teacher:subscribe', data: { studentId } }));
+      };
+
+      ws.onmessage = (event) => {
+        try {
+          const msg = JSON.parse(event.data);
+          if (msg.event === 'teacher:screenshot-stream-frame' && msg.data.studentId === studentId) {
+            setScreenFrame(msg.data.imageBuffer);
+            markStreaming();
+          } else if (msg.event === 'teacher:webcam-stream-frame' && msg.data.studentId === studentId) {
+            setWebcamFrame(msg.data.imageBuffer);
+            markStreaming();
+          } else if (msg.event === 'teacher:stream-stopped' && msg.data.studentId === studentId) {
+            setScreenFrame(null);
+            setWebcamFrame(null);
+            setStreaming(false);
+            setErrorMessage('Sinh viên đã dừng stream');
+          }
+        } catch (err) {
+          console.error('Error parsing WS frame:', err);
+        }
+      };
+
+      ws.onerror = () => {};
+
+      ws.onclose = () => {
+        if (intentionalClose.current) return;
+        setStreaming(false);
+        if (!hasOpened.current && !hasFrames.current) {
+          setErrorMessage('Không thể kết nối máy chủ giám sát');
+        } else {
+          setErrorMessage('Mất kết nối giám sát — đang thử lại...');
+        }
+        retryTimer = setTimeout(connect, 3000);
+      };
    };

+    connect();
+
    return () => {
      intentionalClose.current = true;
-      if (ws.readyState === WebSocket.OPEN) {
-        ws.send(JSON.stringify({ event: 'teacher:unsubscribe', data: { studentId } }));
+      if (retryTimer) clearTimeout(retryTimer);
+      if (wsRef.current?.readyState === WebSocket.OPEN) {
+        wsRef.current.send(JSON.stringify({ event: 'teacher:unsubscribe', data: { studentId } }));
      }
-      ws.close();
+      wsRef.current?.close();
+      wsRef.current = null;
    };
  }, [studentId]);