'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; // ----------------------------------------------------------------------------- // Constants & Config // ----------------------------------------------------------------------------- const VIEW_WIDTH = 1200; const VIEW_HEIGHT = 600; const BG_COLOR = '#0f172a'; // Slate-900 const NGINX_GREEN = '#00ac47'; const ACCENT_BLUE = '#38bdf8'; const SERVER_COLOR = '#1e293b'; const TEXT_COLOR = '#e2e8f0'; // Server Configuration with Weighted Round Robin logic const SERVERS = [ { id: 1, name: 'Backend-01', weight: 5, ip: '192.168.1.101', maxLoad: 100 }, { id: 2, name: 'Backend-02', weight: 2, ip: '192.168.1.102', maxLoad: 60 }, { id: 3, name: 'Backend-03', weight: 3, ip: '192.168.1.103', maxLoad: 80 }, ]; // Generate the weighted sequence (5, 2, 3) -> [0,0,0,0,0, 1,1, 2,2,2] shuffled or sequential const WEIGHTED_SEQUENCE = SERVERS.flatMap((s, index) => Array(s.weight).fill(index)); // Particle Types type Particle = { id: number; progress: number; // 0 to 1 targetServerIdx: number; speed: number; stage: 'ingress' | 'process' | 'egress'; // ingress: Client->Nginx, process: Wait, egress: Nginx->Server color: string; }; // ----------------------------------------------------------------------------- // Helper Components // ----------------------------------------------------------------------------- // 1. Cyberpunk Grid Background const BackgroundGrid = () => ( {/* Subtle gradient overlay */} ); // 2. Client / Internet Node const ClientNode = () => ( CLIENTS 公网流量 (Public) {/* Little dots representing users */} {[...Array(6)].map((_, i) => ( ))} ); // 3. Nginx Central Node const NginxNode = ({ active }: { active: boolean }) => ( {/* Spinning Outer Ring */} {/* Hexagon Shape */} {/* Nginx Logo Text */} NGINX 反向代理 (Reverse Proxy) {/* Processing Indicator */} {active && ( )} ); // 4. Backend Server Node const ServerNode = ({ x, y, data, load }: { x: number, y: number, data: typeof SERVERS[0], load: number }) => { const isHighLoad = load > 80; const barHeight = 60; const currentBarHeight = (load / 100) * barHeight; return ( {/* Server Rack Body */} {/* Blinking Lights */} {/* Server Name & IP */} {data.name} {data.ip} {/* Weight Badge */} WT: {data.weight} {/* Load Bar Visualization */} ); }; // ----------------------------------------------------------------------------- // Main Component // ----------------------------------------------------------------------------- export const NginxLoadBalancerAnimation = () => { // State const [particles, setParticles] = useState([]); const [serverLoads, setServerLoads] = useState([10, 20, 15]); const [totalRequests, setTotalRequests] = useState(0); const [activeConnections, setActiveConnections] = useState(0); // Refs for animation logic (to avoid re-renders on logic calc) const particlesRef = useRef([]); const frameRef = useRef(0); const roundRobinIndex = useRef(0); const lastSpawnTime = useRef(0); // Coordinates const clientPos = { x: 100, y: 300 }; const nginxPos = { x: VIEW_WIDTH / 2 - 100, y: 300 }; const serverStartX = VIEW_WIDTH - 200; const serverPositions = SERVERS.map((_, i) => ({ x: serverStartX, y: 150 + i * 150 // Vertical spacing })); // Bezier Path Calculator const getPointOnBezier = (p0: {x:number, y:number}, p1: {x:number, y:number}, p2: {x:number, y:number}, t: number) => { const mt = 1 - t; return { x: mt * mt * p0.x + 2 * mt * t * p1.x + t * t * p2.x, y: mt * mt * p0.y + 2 * mt * t * p1.y + t * t * p2.y }; }; // Animation Loop useEffect(() => { const loop = (time: number) => { // 1. Spawn Particles (Requests) if (time - lastSpawnTime.current > 400) { // Spawn every 400ms const nextServerIndex = WEIGHTED_SEQUENCE[roundRobinIndex.current % WEIGHTED_SEQUENCE.length]; roundRobinIndex.current++; const newParticle: Particle = { id: Date.now(), progress: 0, targetServerIdx: nextServerIndex, speed: 0.015, // Travel speed stage: 'ingress', color: '#fff' }; particlesRef.current.push(newParticle); lastSpawnTime.current = time; setTotalRequests(prev => prev + 1); } // 2. Update Particles const activeParticles: Particle[] = []; const loadUpdates = [0, 0, 0]; // Temporary load delta particlesRef.current.forEach(p => { if (p.stage === 'ingress') { p.progress += p.speed; if (p.progress >= 1) { p.stage = 'process'; p.progress = 0; // Short pause at Nginx } } else if (p.stage === 'process') { p.progress += 0.05; // Fast processing if (p.progress >= 1) { p.stage = 'egress'; p.progress = 0; p.color = ACCENT_BLUE; // Change color after processing } } else if (p.stage === 'egress') { p.progress += p.speed; if (p.progress < 1) { // Still traveling } else { // Arrived at server loadUpdates[p.targetServerIdx] += 5; // Add load bump return; // Remove particle } } activeParticles.push(p); }); // 3. Update Server Loads (Decay + New Load) setServerLoads(prev => prev.map((load, i) => { const newLoad = Math.max(5, load - 0.2 + loadUpdates[i]); // Decay 0.2 per frame return Math.min(newLoad, 100); })); particlesRef.current = activeParticles; setParticles([...activeParticles]); // Trigger render setActiveConnections(activeParticles.length); frameRef.current = requestAnimationFrame(loop); }; frameRef.current = requestAnimationFrame(loop); return () => cancelAnimationFrame(frameRef.current); }, []); return (

); };