'use client'; import React, { useState, useEffect, useRef } from 'react'; // --- Shared Config --- const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; interface SequenceMessage { id: number; type: 'tcp' | 'tls' | 'http' | 'https'; from: 'client' | 'server'; label: string; detail?: string; start: number; // ms dur: number; // ms flight time color: string; } // Config for the two vertical timelines const HTTP_MSGS: SequenceMessage[] = [ { id: 1, type: 'tcp', from: 'client', label: 'SYN', start: 500, dur: 800, color: '#888' }, { id: 2, type: 'tcp', from: 'server', label: 'SYN-ACK', start: 1500, dur: 800, color: '#888' }, { id: 3, type: 'tcp', from: 'client', label: 'ACK', start: 2500, dur: 800, color: '#888' }, { id: 4, type: 'http', from: 'client', label: 'GET /login', detail: '明文: user=admin&pass=123', start: 4000, dur: 1000, color: '#ff0055' }, { id: 5, type: 'http', from: 'server', label: '200 OK', detail: '明文: Login Successful', start: 5500, dur: 1000, color: '#ff0055' }, ]; const HTTPS_OFFSET = 7500; // Start after HTTP finishes const HTTPS_MSGS: SequenceMessage[] = [ { id: 11, type: 'tcp', from: 'client', label: 'SYN', start: HTTPS_OFFSET + 0, dur: 800, color: '#888' }, { id: 12, type: 'tcp', from: 'server', label: 'SYN-ACK', start: HTTPS_OFFSET + 1000, dur: 800, color: '#888' }, { id: 13, type: 'tcp', from: 'client', label: 'ACK', start: HTTPS_OFFSET + 2000, dur: 800, color: '#888' }, { id: 14, type: 'tls', from: 'client', label: 'ClientHello', start: HTTPS_OFFSET + 3000, dur: 800, color: '#aa00ff' }, { id: 15, type: 'tls', from: 'server', label: 'ServerHello + Cert', start: HTTPS_OFFSET + 4000, dur: 800, color: '#aa00ff' }, { id: 16, type: 'tls', from: 'client', label: 'Key Exchange', start: HTTPS_OFFSET + 5000, dur: 800, color: '#aa00ff' }, { id: 17, type: 'tls', from: 'server', label: 'Change Cipher Spec', start: HTTPS_OFFSET + 6000, dur: 800, color: '#aa00ff' }, { id: 18, type: 'https', from: 'client', label: 'GET /login (Encrypted)', detail: '密文: 7d8f9s89d...', start: HTTPS_OFFSET + 7500, dur: 1000, color: '#00ff66' }, { id: 19, type: 'https', from: 'server', label: '200 OK (Encrypted)', detail: '密文: x99s8s...', start: HTTPS_OFFSET + 9000, dur: 1000, color: '#00ff66' }, ]; export const HttpVsHttpsView = () => { const [time, setTime] = useState(0); const requestRef = useRef(0); const LOOP_DURATION = 19000; // Extended loop for sequential playback // Layout const TOP_Y = 100; const BOTTOM_Y = 580; const LEFT_CENTER = 250; const RIGHT_CENTER = 750; const WIDTH = 200; // width between client and server lines const animate = () => { setTime(prev => { if (prev > LOOP_DURATION) return 0; // Loop return prev + 16; // Approx 60fps }); requestRef.current = requestAnimationFrame(animate); }; useEffect(() => { requestRef.current = requestAnimationFrame(animate); return () => cancelAnimationFrame(requestRef.current); }, []); // Calculate Y position for a message based on its order/time roughly const getMessageY = (index: number) => TOP_Y + 40 + index * 45; const renderSequence = (messages: SequenceMessage[], centerX: number, title: string, isHttps: boolean) => { const clientX = centerX - WIDTH/2; const serverX = centerX + WIDTH/2; // Determine if TLS is established (for HTTPS lock icon) // Lock appears after Change Cipher Spec (offset + 6000 + duration) roughly const isSecure = isHttps && time > (HTTPS_OFFSET + 6500); return ( {/* Title */} {title} {isHttps ? "TLS 加密通道" : "明文传输"} {/* Actors */} Client {isSecure && 🔒} Server {isSecure && 🔒} {/* Vertical Time Lines */} {/* Messages */} {messages.map((msg, i) => { const y = getMessageY(i); // Animation state // 1. Not started: Hidden // 2. In flight: Moving packet // 3. Finished: Static line + label if (time < msg.start) return null; const isFinished = time > msg.start + msg.dur; const progress = isFinished ? 1 : (time - msg.start) / msg.dur; const startX = msg.from === 'client' ? clientX : serverX; const endX = msg.from === 'client' ? serverX : clientX; // Current packet pos const curX = startX + (endX - startX) * progress; // Color logic let strokeColor = msg.color; return ( {/* Historical Trace Line (only if started) */} {/* Moving Packet */} {!isFinished && ( {msg.label} {msg.detail && ( {msg.detail} )} )} {/* Final Static Arrow */} {isFinished && ( {msg.label} )} ); })} ); }; return ( ); };