'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; // --------------------------------------------------------- // Constants & Config // --------------------------------------------------------- const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; const TOTAL_PACKETS = 20; const WINDOW_SIZE = 5; const PACKET_SIZE = 40; const GAP = 15; const SENDER_Y = 150; const RECEIVER_Y = 450; const TRAVEL_TIME = 1500; // ms for one way travel // Colors const COLORS = { bg: '#0f172a', grid: '#1e293b', primary: '#06b6d4', // Cyan success: '#10b981', // Green warning: '#f59e0b', // Amber text: '#e2e8f0', textMuted: '#64748b', window: 'rgba(6, 182, 212, 0.15)', windowBorder: '#06b6d4', }; // --------------------------------------------------------- // Types // --------------------------------------------------------- type PacketStatus = 'IDLE' | 'IN_FLIGHT' | 'RECEIVED' | 'ACK_IN_FLIGHT' | 'ACKED'; interface Packet { id: number; seq: number; status: PacketStatus; // Animation coordinates (controlled by React state + CSS transition) x: number; y: number; opacity: number; } interface LogEntry { id: number; msg: string; type: 'send' | 'recv' | 'ack' | 'win'; } // --------------------------------------------------------- // Component // --------------------------------------------------------- export default function TCPWindowAnimation() { // --- State --- const [packets, setPackets] = useState([]); const [windowStart, setWindowStart] = useState(0); const [logs, setLogs] = useState([]); // Refs for logic that doesn't need re-renders or to avoid closure staleness const timeoutsRef = useRef([]); const isResettingRef = useRef(false); // --- Initialization --- const initPackets = () => { const p: Packet[] = []; const startX = (VIEW_WIDTH - (TOTAL_PACKETS * (PACKET_SIZE + GAP))) / 2 + 100; // Offset for scrolling effect for (let i = 0; i < TOTAL_PACKETS; i++) { p.push({ id: i, seq: 1000 + i, status: 'IDLE', x: 0, // Relative to container y: 0, opacity: 0.5, }); } setPackets(p); setWindowStart(0); setLogs([]); isResettingRef.current = false; }; useEffect(() => { initPackets(); return () => timeoutsRef.current.forEach(clearTimeout); }, []); // --- Helper: Add Log --- const addLog = (msg: string, type: 'send' | 'recv' | 'ack' | 'win') => { setLogs(prev => { const newLogs = [...prev, { id: Date.now() + Math.random(), msg, type }]; if (newLogs.length > 7) newLogs.shift(); return newLogs; }); }; // --- Core Logic: Window Sliding --- useEffect(() => { if (packets.length === 0 || isResettingRef.current) return; // 1. Check if we need to slide the window // If the packet at windowStart is ACKED, slide right if (windowStart < TOTAL_PACKETS && packets[windowStart]?.status === 'ACKED') { const timer = setTimeout(() => { setWindowStart(prev => { const next = prev + 1; addLog(`窗口滑动 -> [${packets[next]?.seq || 'END'}]`, 'win'); return next; }); }, 500); timeoutsRef.current.push(timer); } // 2. Check for completion if (windowStart === TOTAL_PACKETS && !isResettingRef.current) { isResettingRef.current = true; const timer = setTimeout(initPackets, 4000); timeoutsRef.current.push(timer); } }, [packets, windowStart]); // --- Core Logic: Packet Transmission --- useEffect(() => { if (packets.length === 0 || isResettingRef.current) return; // Iterate through current window const end = Math.min(windowStart + WINDOW_SIZE, TOTAL_PACKETS); for (let i = windowStart; i < end; i++) { const pkt = packets[i]; // If packet is IDLE and inside window, send it if (pkt.status === 'IDLE') { // Trigger Send triggerSend(i); } } }, [packets, windowStart]); // --- Action Triggers --- const triggerSend = (index: number) => { // Optimistic update to prevent double sending setPackets(prev => { const np = [...prev]; if (np[index].status !== 'IDLE') return prev; np[index].status = 'IN_FLIGHT'; return np; }); addLog(`发送数据包 SEQ: ${packets[index].seq}`, 'send'); // Simulate Network Delay (Sender -> Receiver) const delay = TRAVEL_TIME + Math.random() * 500; const t1 = setTimeout(() => { triggerReceive(index); }, delay); timeoutsRef.current.push(t1); }; const triggerReceive = (index: number) => { setPackets(prev => { const np = [...prev]; np[index].status = 'RECEIVED'; return np; }); addLog(`收到数据包 SEQ: ${packets[index].seq}`, 'recv'); // Processing time then send ACK const t2 = setTimeout(() => { triggerAck(index); }, 500); timeoutsRef.current.push(t2); }; const triggerAck = (index: number) => { setPackets(prev => { const np = [...prev]; np[index].status = 'ACK_IN_FLIGHT'; return np; }); addLog(`发送确认 ACK: ${packets[index].seq + 1}`, 'recv'); // Simulate Network Delay (Receiver -> Sender) const delay = TRAVEL_TIME + Math.random() * 500; const t3 = setTimeout(() => { finalizePacket(index); }, delay); timeoutsRef.current.push(t3); }; const finalizePacket = (index: number) => { setPackets(prev => { const np = [...prev]; np[index].status = 'ACKED'; return np; }); addLog(`收到确认 ACK: ${packets[index].seq + 1}`, 'ack'); }; // --- Visual Calculations --- // Calculate the X position of the "Stream" to keep the window centered-ish const streamOffsetX = useMemo(() => { // Target: Keep windowStart around 200px from left const targetX = 200; const currentWindowX = windowStart * (PACKET_SIZE + GAP); return targetX - currentWindowX; }, [windowStart]); // --- Render Helpers --- const getPacketColor = (status: PacketStatus) => { switch (status) { case 'IDLE': return COLORS.textMuted; case 'IN_FLIGHT': return COLORS.warning; case 'RECEIVED': return COLORS.primary; // Received but not ACKed back at sender case 'ACK_IN_FLIGHT': return COLORS.success; case 'ACKED': return COLORS.success; default: return COLORS.textMuted; } }; const getPacketY = (status: PacketStatus) => { // This is for the "flying" dot // We use CSS transitions for smooth movement, so we just toggle the target class/state return 0; }; return (

); }