'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; // --- Shared Config --- const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; // ========================================== // PROTOCOL ANALYSIS (Reversed Layer Logic) // ========================================== type DetectionMethod = 'port' | 'content'; interface ProtoPacket { id: number; x: number; y: number; protocol: string; // 'HTTP', 'SSH', 'DNS' method: DetectionMethod; binary: string; port: number; signature: string; // e.g. "GET /" // Header presence flags for decapsulation hasEth: boolean; hasIP: boolean; hasTCP: boolean; identified: boolean; // True when reached App layer and analysis complete } // REVERSED CONFIG: Bottom -> Up const LAYERS_CONFIG = [ { id: 'link', label: '链路层 (Link Layer)', y: 520, color: '#777', detail: '移除 ETH 头部' }, { id: 'network', label: '网络层 (Network Layer)', y: 380, color: '#00ccff', detail: '移除 IP 头部' }, { id: 'transport', label: '传输层 (Transport Layer)', y: 240, color: '#ffaa00', detail: '移除 TCP 头部' }, { id: 'app', label: '应用层 (App Layer)', y: 100, color: '#00ff66', detail: '识别应用协议' } ]; const PROTOCOLS = [ { name: 'HTTP', port: 80, sig: 'GET /' }, { name: 'SSH', port: 22, sig: 'SSH-2' }, { name: 'HTTP', port: 8080, sig: 'POST' }, { name: 'DNS', port: 53, sig: 'x01x00' }, { name: 'TLS', port: 443, sig: 'x16x03' }, { name: 'MySQL', port: 3306, sig: 'Auth' } ]; const generateBinaryString = (length: number) => { let str = ''; for (let i = 0; i < length; i++) str += Math.random() > 0.5 ? 1 : 0; return str; }; export const ProtocolAnalysisView = () => { const [packets, setPackets] = useState([]); const requestRef = useRef(undefined); const lastSpawnRef = useRef(0); const packetIdRef = useRef(0); const spawnPacket = () => { const proto = PROTOCOLS[Math.floor(Math.random() * PROTOCOLS.length)]; let method: DetectionMethod = 'content'; if ([80, 22, 53, 443, 3306].includes(proto.port) && Math.random() > 0.3) { method = 'port'; } const newPacket: ProtoPacket = { id: packetIdRef.current++, x: VIEW_WIDTH / 2, y: VIEW_HEIGHT + 100, protocol: proto.name, method: method, binary: generateBinaryString(8), port: proto.port, signature: proto.sig, hasEth: true, hasIP: true, hasTCP: true, identified: false }; setPackets(prev => [...prev, newPacket]); }; const animate = (time: number) => { if (time - lastSpawnRef.current > 5000) { spawnPacket(); lastSpawnRef.current = time; } setPackets(prev => { return prev.map(p => { const speed = 0.5; const newY = p.y - speed; // Logic: Strip headers AFTER they fully pass the layer line. const hasEth = newY + 90 > 520; const hasIP = newY + 70 > 380; const hasTCP = newY + 50 > 240; const identified = newY < 140; if (newY < -100) return null; return { ...p, y: newY, hasEth, hasIP, hasTCP, identified }; }).filter((p): p is ProtoPacket => p !== null); }); requestRef.current = requestAnimationFrame(animate); }; useEffect(() => { requestRef.current = requestAnimationFrame(animate); return () => { if (requestRef.current) cancelAnimationFrame(requestRef.current); }; }, []); return ( ); };