```javascript 'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; const COLOR_BG = "#0f172a"; const COLOR_TCP = "#38bdf8"; // Sky Blue const COLOR_UDP = "#f472b6"; // Pink const COLOR_TEXT = "#e2e8f0"; const COLOR_PACKET_LOSS = "#ef4444"; // Red const COLOR_SUCCESS = "#22c55e"; // Green // --- Utility Hooks & Components --- const useAnimationFrame = (callback) => { const requestRef = useRef(); const previousTimeRef = useRef(); const animate = time => { if (previousTimeRef.current != undefined) { const deltaTime = time - previousTimeRef.current; callback(deltaTime); } previousTimeRef.current = time; requestRef.current = requestAnimationFrame(animate); }; useEffect(() => { requestRef.current = requestAnimationFrame(animate); return () => cancelAnimationFrame(requestRef.current); }, []); }; const ComputerNode = ({ x, y, label, color, active }) => ( {/* Screen Glow */} {/* Status Light */} {active && } {label} ); const Packet = ({ x, y, label, color, type = 'data', isLost }) => { return ( {type === 'handshake' ? ( ) : ( )} {label} {isLost && ( )} ); }; export default function TcpVsUdpAnimation() { // --- Simulation State --- // TCP State const [tcpPhase, setTcpPhase] = useState('IDLE'); // IDLE, HANDSHAKE, DATA, RETRY, FINISH const [tcpPackets, setTcpPackets] = useState([]); const [tcpLog, setTcpLog] = useState("准备就绪"); const [tcpConnActive, setTcpConnActive] = useState(false); const tcpSeqRef = useRef(0); const tcpTimerRef = useRef(0); // UDP State const [udpPackets, setUdpPackets] = useState([]); const [udpLog, setUdpLog] = useState("准备就绪"); const udpTimerRef = useRef(0); const udpSeqRef = useRef(0); // Constants const START_X = 150; const END_X = 350; const DISTANCE = END_X - START_X; const SPEED_TCP = 0.15; // px per ms const SPEED_UDP = 0.25; // Faster // --- Animation Loop --- useAnimationFrame((deltaTime) => { // 1. TCP LOGIC updateTCP(deltaTime); // 2. UDP LOGIC updateUDP(deltaTime); }); // --- TCP Logic Core --- const updateTCP = (dt) => { tcpTimerRef.current += dt; setTcpPackets(prev => { let nextPackets = prev.map(p => ({ ...p, x: p.x + (p.dir * SPEED_TCP * dt) })); // Remove arrived packets const arrived = nextPackets.filter(p => (p.dir === 1 && p.x >= END_X) || (p.dir === -1 && p.x <= START_X)); nextPackets = nextPackets.filter(p => (p.dir === 1 && p.x < END_X) && (p.dir === -1 && p.x > START_X)); // Handle Arrivals arrived.forEach(p => { if (p.isLost) return; // Lost packets don't trigger logic if (p.type === 'SYN') { setTcpLog("服务器收到 SYN -> 发送 SYN-ACK"); spawnTcpPacket('SYN-ACK', -1, 'handshake'); } else if (p.type === 'SYN-ACK') { setTcpLog("客户端收到 SYN-ACK -> 发送 ACK"); spawnTcpPacket('ACK', 1, 'handshake'); setTcpConnActive(true); setTimeout(() => setTcpPhase('DATA'), 500); } else if (p.type === 'ACK' && tcpPhase === 'HANDSHAKE') { setTcpLog("连接建立！开始传输数据"); } else if (p.type === 'DATA') { // Normal Data Arrival setTcpLog(`服务器收到数据包 ${p.id}`); spawnTcpPacket('ACK', -1, 'ack'); } else if (p.type === 'DATA_LOST') { // Logic handled in timer, visual just vanishes } }); return nextPackets; }); // TCP Timeline Machine if (tcpPhase === 'IDLE' && tcpTimerRef.current > 1000) { setTcpPhase('HANDSHAKE'); setTcpLog("开始三次握手 (SYN)"); spawnTcpPacket('SYN', 1, 'handshake'); tcpTimerRef.current = 0; } if (tcpPhase === 'DATA') { // Sequence: Send 1, 2, 3. 2 gets lost. if (tcpSeqRef.current === 0 && tcpTimerRef.current > 500) { spawnTcpPacket('SEQ 1', 1, 'data'); tcpSeqRef.current++; setTcpLog("发送有序数据包 1"); } if (tcpSeqRef.current === 1 && tcpTimerRef.current > 1200) { spawnTcpPacket('SEQ 2', 1, 'data', true); // LOST PACKET tcpSeqRef.current++; setTcpLog("发送有序数据包 2 (模拟丢包)"); } if (tcpSeqRef.current === 2 && tcpTimerRef.current > 1900) { spawnTcpPacket('SEQ 3', 1, 'data'); tcpSeqRef.current++; setTcpLog("发送有序数据包 3"); } // Trigger Retry Logic if (tcpSeqRef.current === 3 && tcpTimerRef.current > 4000) { setTcpPhase('RETRY'); tcpTimerRef.current = 0; } } if (tcpPhase === 'RETRY') { if (tcpTimerRef.current > 500) { setTcpLog("超时！未收到 ACK 2 -> 重传数据包 2"); spawnTcpPacket('SEQ 2', 1, 'data'); // Resend success setTcpPhase('FINISH'); tcpTimerRef.current = 0; } } if (tcpPhase === 'FINISH' && tcpTimerRef.current > 4000) { // Reset Loop setTcpPhase('IDLE'); setTcpConnActive(false); setTcpPackets([]); tcpSeqRef.current = 0; tcpTimerRef.current = 0; setTcpLog("传输完成，断开连接"); } }; const spawnTcpPacket = (id, dir, type, willLose = false) => { setTcpPackets(prev => [...prev, { id, dir, type, x: dir === 1 ? START_X : END_X, isLost: willLose, key: Math.random() }]); }; // --- UDP Logic Core --- const updateUDP = (dt) => { udpTimerRef.current += dt; // Move Packets setUdpPackets(prev => { let next = prev.map(p => { // If lost, fade out or stop halfway if (p.willLose && p.x > (START_X + DISTANCE/2) && !p.lostVisual) { return { ...p, lostVisual: true, opacity: 0 }; } return { ...p, x: p.x + (SPEED_UDP * dt) }; }); // Remove off-screen return next.filter(p => p.x < END_X + 20 && (!p.lostVisual || p.opacity > 0)); }); // Spawner if (udpTimerRef.current > 400) { // Spawn every 400ms udpSeqRef.current++; const willLose = Math.random() > 0.7; // 30% loss rate setUdpPackets(prev => [...prev, { id: udpSeqRef.current, x: START_X, willLose, lostVisual: false, key: Math.random() }]); if (willLose) { setUdpLog(`广播数据包 ${udpSeqRef.current} (途中丢失)`); } else { setUdpLog(`广播数据包 ${udpSeqRef.current}`); } udpTimerRef.current = 0; } }; // --- Render Helpers --- const renderGrid = () => ( ); return (

); } ```