.. 제목: TCP 상태 머신 대화형 다이어그램
.. 슬러그: tcp-state-machine
.. 날짜: 2026-03-27 12:00:00 UTC
.. 태그: 네트워킹, TCP, rfc793, 상태 머신, 계산기, 도구
.. 카테고리: 계산기
.. 링크:
.. 설명: 모든 RFC 793 상태를 다루는 클릭 가능한 TCP 상태 머신 다이어그램. 일반적인 정지 상태에 대한 트리거링 이벤트, 교환된 패킷, 타이머 및 진단 팁을 표시합니다.
.. 유형: 텍스트
<style>
/* ── CANONICAL DESIGN SYSTEM ──────────────────────────────────────────────── */
.calc-container { max-width: 900px; margin: 20px auto; padding: 20px; }
.calc-header { margin-bottom: 30px; padding: 25px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); color: white; }
.calc-header h2 { margin-top: 0; color: white; font-size: 28px; margin-bottom: 10px; }
.calc-header p  { margin: 10px 0; opacity: 0.95; font-size: 15px; }
.result-section { background: white; border: 1px solid #e0e0e0; border-radius: 8px; margin-top: 20px; overflow: hidden; box-shadow: 0 2px 4px rgba(0,0,0,0.05); transition: all 0.3s ease; }
.result-section:hover { box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
.section-header { background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%); color: white; padding: 15px 20px; font-size: 18px; font-weight: bold; }
.section-content { padding: 20px; background: #fafafa; }
@media (max-width: 768px) { .calc-header h2 { font-size: 22px; } .calc-container { padding: 10px; } }
/* Page-specific */
.legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.legend-item { display: flex; align-items: center; gap: 6px; font-size: 13px; color: rgba(255,255,255,0.9); }
.legend-dot { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; }
#cy { width: 100%; height: 520px; background: #f8faff; border-radius: 4px; }
.detail-row { display: flex; gap: 8px; margin: 6px 0; font-size: 13px; }
.detail-label { font-weight: bold; color: #2d6a2d; width: 120px; flex-shrink: 0; }
.diagnosis { background: #fff8e0; border-left: 4px solid #f0a500; padding: 10px 14px; border-radius: 6px; margin-top: 12px; font-size: 13px; }
@media (max-width: 600px) { #cy { height: 360px; } }
</style>
<div class="calc-container">
<div class="calc-header">
<h2>TCP 상태 머신 대화형 다이어그램</h2>
<p>상태 노드를 클릭하면 트리거링 이벤트, 교환된 패킷, 타이머 및 정체 상태 진단 팁을 볼 수 있습니다.</p>
<div class="legend">
<div class="legend-item"><div class="legend-dot" style="background:#28a745"></div>시작/끝 상태</div>
<div class="legend-item"><div class="legend-dot" style="background:#4CAF50"></div>정상 상태</div>
<div class="legend-item"><div class="legend-dot" style="background:#dc3545"></div>TIME_WAIT / 멈춤</div>
<div class="legend-item"><div class="legend-dot" style="background:#f7971e"></div>종료 상태</div>
</div>
</div>
<div class="result-section">
<div class="section-header">상태 다이어그램</div>
<div class="section-content" style="padding:12px">
<div id="cy"></div>
</div>
</div>
<div class="result-section" id="detailPanel">
<div class="section-header">상태 세부정보</div>
<div class="section-content" id="detailContent">
<p style="color:#999">세부정보를 보려면 위의 상태 노드를 클릭하세요.</p>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.26.0/cytoscape.min.js"></script>
<script>
const STATE_DATA = {
    CLOSED:     { color:'#28a745', event:'Initial state. No connection.',
        packet:'—', timer:'—',
        desc:'No connection exists. Starting point for both client (active open) and server (passive open).',
        diagnosis:'' },
    LISTEN:     { color:'#0f3460', event:'Server calls listen(). Waiting for SYN.',
        packet:'Receives SYN', timer:'—',
        desc:'Server is waiting for an incoming connection request.',
        diagnosis:'Stuck LISTEN: Port not open. Check: ss -lntp | grep &lt;port&gt;' },
    SYN_SENT:   { color:'#0f3460', event:'Client calls connect(). SYN sent.',
        packet:'Sends SYN', timer:'SYN-timeout (~75s)',
        desc:'Client sent SYN, waiting for SYN-ACK.',
        diagnosis:'Stuck SYN_SENT: Firewall dropping SYN, or server not listening. Check MTU/PMTUD if SYN goes out but SYN-ACK never arrives.' },
    SYN_RCVD:   { color:'#0f3460', event:'SYN received. SYN-ACK sent.',
        packet:'Receives SYN, sends SYN-ACK', timer:'SYN-backlog timer',
        desc:'Server received SYN, replied with SYN-ACK, waiting for ACK (3-way handshake).',
        diagnosis:'Many SYN_RCVD: SYN flood / DDoS. Enable tcp_syncookies: sysctl -w net.ipv4.tcp_syncookies=1' },
    ESTABLISHED:{ color:'#28a745', event:'ACK received. Connection open.',
        packet:'ACK completes handshake', timer:'Keepalive (optional, ~7200s default)',
        desc:'The normal data transfer state. Both endpoints can send and receive data.',
        diagnosis:'' },
    FIN_WAIT_1: { color:'#f7971e', event:'Application calls close(). FIN sent.',
        packet:'Sends FIN', timer:'—',
        desc:'Active closer sent FIN, waiting for ACK or FIN from peer.',
        diagnosis:'' },
    FIN_WAIT_2: { color:'#f7971e', event:'FIN-ACK received. Waiting for peer FIN.',
        packet:'Received ACK for FIN', timer:'tcp_fin_timeout (60s default)',
        desc:'ACK received for FIN, waiting for remote FIN to complete half-close.',
        diagnosis:'Stuck FIN_WAIT_2: Remote app never called close(). Reduce tcp_fin_timeout. ss -ant state fin-wait-2' },
    CLOSE_WAIT: { color:'#dc3545', event:'FIN received from peer. ACK sent.',
        packet:'Receives FIN, sends ACK', timer:'—',
        desc:'Passive closer received FIN. Waiting for local application to close().',
        diagnosis:'Many CLOSE_WAIT: Application bug — app not calling close() after receiving EOF. Profile the application for socket leaks.' },
    CLOSING:    { color:'#f7971e', event:'Both sides send FIN simultaneously.',
        packet:'FIN sent and FIN received', timer:'—',
        desc:'Simultaneous close — both sides sent FIN at same time. Rare.',
        diagnosis:'' },
    LAST_ACK:   { color:'#f7971e', event:'Passive closer sends FIN. Waiting final ACK.',
        packet:'Sends FIN', timer:'—',
        desc:'Passive closer sent its FIN, waiting for final ACK from active closer.',
        diagnosis:'' },
    TIME_WAIT:  { color:'#dc3545', event:'Final FIN received and ACKed.',
        packet:'Sends final ACK', timer:'2×MSL (60–120s, linux default 60s)',
        desc:'Waiting 2×MSL to ensure remote received the final ACK, and to prevent old segments from being accepted by a new connection.',
        diagnosis:'Many TIME_WAIT: Normal under high connection rate. Mitigate: tcp_tw_reuse=1, reduce tcp_fin_timeout, use persistent connections, or load balance across more ports.' },
};

const EDGES = [
    {from:'CLOSED',to:'LISTEN',label:'passive open\nlisten()'},
    {from:'CLOSED',to:'SYN_SENT',label:'active open\nconnect()'},
    {from:'LISTEN',to:'SYN_RCVD',label:'rcv SYN\nsnd SYN-ACK'},
    {from:'SYN_SENT',to:'ESTABLISHED',label:'rcv SYN-ACK\nsnd ACK'},
    {from:'SYN_SENT',to:'SYN_RCVD',label:'rcv SYN\n(simultaneous)'},
    {from:'SYN_RCVD',to:'ESTABLISHED',label:'rcv ACK'},
    {from:'SYN_RCVD',to:'FIN_WAIT_1',label:'close()\nsnd FIN'},
    {from:'ESTABLISHED',to:'FIN_WAIT_1',label:'close()\nsnd FIN'},
    {from:'ESTABLISHED',to:'CLOSE_WAIT',label:'rcv FIN\nsnd ACK'},
    {from:'FIN_WAIT_1',to:'FIN_WAIT_2',label:'rcv ACK'},
    {from:'FIN_WAIT_1',to:'CLOSING',label:'rcv FIN\nsnd ACK'},
    {from:'FIN_WAIT_1',to:'TIME_WAIT',label:'rcv FIN+ACK\nsnd ACK'},
    {from:'FIN_WAIT_2',to:'TIME_WAIT',label:'rcv FIN\nsnd ACK'},
    {from:'CLOSE_WAIT',to:'LAST_ACK',label:'close()\nsnd FIN'},
    {from:'CLOSING',to:'TIME_WAIT',label:'rcv ACK'},
    {from:'LAST_ACK',to:'CLOSED',label:'rcv ACK'},
    {from:'TIME_WAIT',to:'CLOSED',label:'2×MSL\ntimeout'},
];

const positions = {
    CLOSED: {x:400,y:50}, LISTEN: {x:150,y:150}, SYN_SENT: {x:650,y:150},
    SYN_RCVD: {x:150,y:280}, ESTABLISHED: {x:400,y:280},
    FIN_WAIT_1: {x:650,y:280}, CLOSE_WAIT: {x:150,y:410},
    FIN_WAIT_2: {x:650,y:410}, CLOSING: {x:500,y:410},
    LAST_ACK: {x:150,y:540}, TIME_WAIT: {x:650,y:540},
};

const cy = cytoscape({
    container: document.getElementById('cy'),
    elements: [
        ...Object.keys(STATE_DATA).map(id => ({
            data: { id, label: id.replace(/_/g,' ') },
            position: positions[id] || {x:400,y:300},
        })),
        ...EDGES.map((e,i) => ({
            data: { id:`e${i}`, source:e.from, target:e.to, label:e.label },
        })),
    ],
    style: [
        { selector: 'node', style: {
            'label': 'data(label)', 'text-wrap': 'wrap',
            'width': 110, 'height': 44,
            'shape': 'roundrectangle',
            'background-color': ele => STATE_DATA[ele.id()]?.color || '#0f3460',
            'color': '#fff', 'font-size': 11, 'font-weight': 'bold',
            'text-valign': 'center', 'text-halign': 'center',
            'border-width': 2, 'border-color': '#fff',
        }},
        { selector: 'node:selected', style: {
            'border-color': '#ffd200', 'border-width': 3,
            'box-shadow': '0 0 8px #ffd200',
        }},
        { selector: 'edge', style: {
            'label': 'data(label)', 'curve-style': 'bezier',
            'target-arrow-shape': 'triangle', 'arrow-scale': 1.2,
            'line-color': '#667', 'target-arrow-color': '#667',
            'font-size': 9, 'text-wrap': 'wrap',
            'text-background-color': '#fff', 'text-background-opacity': 0.85,
            'text-background-padding': 2,
            'color': '#333', 'width': 1.5,
        }},
    ],
    layout: { name: 'preset' },
    userZoomingEnabled: true,
    userPanningEnabled: true,
});

cy.on('tap', 'node', function(evt) {
    const id = evt.target.id();
    const d = STATE_DATA[id];
    if (!d) return;
    const diag = d.diagnosis ? `<div class="diagnosis"><strong>Diagnosis:</strong> ${d.diagnosis}</div>` : '';
    document.getElementById('detailContent').innerHTML = `
        <h3 style="margin-top: 0; color: #2d6a2d;">${id.replace(/_/g,' ')}</h3>
        <div class="detail-row"><span class="detail-label">Description:</span><span>${d.desc}</span></div>
        <div class="detail-row"><span class="detail-label">Trigger:</span><span>${d.event}</span></div>
        <div class="detail-row"><span class="detail-label">Packets:</span><span>${d.packet}</span></div>
        <div class="detail-row"><span class="detail-label">Timer:</span><span>${d.timer}</span></div>
        ${diag}`;
});

cy.fit(cy.nodes(), 30);
</script>