// 순진한 폴링 접근
setInterval(async () => {
  const res = await fetch("/api/incubator");
  const data = await res.json();
  updateChart(data);
}, 1000);

┌────────────────┐          WebSocket           ┌──────────────────┐
│  Python 서버    │  ═══════════════════════════  │  React 브라우저   │
│  (모의 인큐베이터) │  {temp, co2, pH, timestamp}  │  (대시보드)       │
│                │  ← 1초에 여러 번 밀어보냄       │                  │
└────────────────┘                              └──────────────────┘

{"temp": 37.02, "co2": 4.98, "pH": 7.35, "timestamp": 1720000000.5}
{"temp": 37.03, "co2": 4.97, "pH": 7.35, "timestamp": 1720000000.7}
{"temp": 37.01, "co2": 4.98, "pH": 7.36, "timestamp": 1720000000.9}

실시간 장비 대시보드 (풀스택)
   ┌──────────────────────────────────────────────────────┐
   │                                                        │
   │   [서버 사이드]                     [클라이언트 사이드]    │
   │                                                        │
   │   ┌─────────────────┐              ┌────────────────┐  │
   │   │ 인큐베이터 모의값    │              │ WebSocket 연결  │  │
   │   │ (initial full)   │              │ (수신 → React) │  │
   │   └─────────┬───────┘              └────────┬───────┘  │
   │             │                                │          │
   │             ▼                                ▼          │
   │   ┌─────────────────┐              ┌────────────────┐  │
   │   │ WebSocket 서버   │ ────────►    │ 시계열 버퍼      │  │
   │   │ 부품: websocket   │              │ (최근 60초)      │  │
   │   └─────────────────┘              └────────┬───────┘  │
   │       ★ 직접 만든다                          │          │
   │                                              ▼          │
   │                                    ┌────────────────┐  │
   │                                    │ React 그래프    │  │
   │                                    │ + 경고 배너     │  │
   │                                    └────────────────┘  │
   │                                        ★ 직접 만든다     │
   └──────────────────────────────────────────────────────┘

# server.py
import asyncio
import json
import time
import random

import websockets  # pip install websockets

class MockIncubator:
    """모의 인큐베이터 — 온도/CO2/pH를 노이즈와 함께 시뮬레이션."""
    def __init__(self, target_temp=37.0, target_co2=5.0, target_ph=7.35):
        self.target_temp = target_temp
        self.target_co2 = target_co2
        self.target_ph = target_ph
        # 살짝 문 열림 시뮬레이션 상태
        self.door_open = False

    def sample(self) -> dict:
        # 정상 상태: 목표값 ± 작은 노이즈
        temp_noise = 0.15
        co2_noise = 0.10 if not self.door_open else 0.8
        ph_noise = 0.02
        return {
            "temp": round(self.target_temp + random.gauss(0, temp_noise), 3),
            "co2":  round(self.target_co2 + random.gauss(0, co2_noise), 3),
            "pH":   round(self.target_ph + random.gauss(0, ph_noise), 3),
            "timestamp": round(time.time(), 3),
            "door_open": self.door_open,
        }

incubator = MockIncubator()

async def stream_handler(websocket):
    """새 클라이언트 연결마다 이 함수가 호출됨."""
    print(f"[+] 클라이언트 연결됨: {websocket.remote_address}")
    try:
        while True:
            data = incubator.sample()
            await websocket.send(json.dumps(data))
            await asyncio.sleep(0.5)   # 초당 2회 push
    except websockets.ConnectionClosed:
        print("[-] 클라이언트 연결 종료")

async def main():
    async with websockets.serve(stream_handler, "localhost", 8765):
        print("서버 시작: ws://localhost:8765")
        await asyncio.Future()   # forever

if __name__ == "__main__":
    asyncio.run(main())

# test_server.py — 서버가 잘 밀어보내는지 클라이언트 흉내로 검증
import asyncio
import json
import websockets

async def sanity_check():
    async with websockets.connect("ws://localhost:8765") as ws:
        # 5개 메시지 받기
        messages = []
        for _ in range(5):
            raw = await ws.recv()
            messages.append(json.loads(raw))
    # 검증
    assert len(messages) == 5
    for m in messages:
        assert set(m.keys()) >= {"temp", "co2", "pH", "timestamp"}
        assert 35 < m["temp"] < 39      # 정상 범위
        assert 3 < m["co2"] < 7
        assert 6.8 < m["pH"] < 8.0
    # 타임스탬프가 시간순으로 증가
    times = [m["timestamp"] for m in messages]
    assert all(times[i] <= times[i+1] for i in range(len(times)-1))

# asyncio.run(sanity_check())   # 서버가 켜져 있을 때 실행

// 순진한 버퍼 - 문제 있음
let buffer = [];
function push(point) {
  buffer.push(point);
  if (buffer.length > 120) buffer.shift();
}

// buffer.ts
export class TimeSeriesBuffer<T> {
  private data: (T | null)[];
  private writeIdx = 0;
  private size = 0;

  constructor(public capacity: number) {
    this.data = new Array(capacity).fill(null);
  }

  push(value: T): void {
    this.data[this.writeIdx] = value;
    this.writeIdx = (this.writeIdx + 1) % this.capacity;
    this.size = Math.min(this.size + 1, this.capacity);
  }

  toArray(): T[] {
    // 시간 순으로 정렬된 배열 반환
    if (this.size < this.capacity) {
      // 아직 다 안 찼음 — 앞에서부터 size 개
      return this.data.slice(0, this.size) as T[];
    }
    // 다 찼음 — writeIdx 이후부터 감싸서 반환
    return [
      ...this.data.slice(this.writeIdx),
      ...this.data.slice(0, this.writeIdx),
    ] as T[];
  }
}

// buffer.test.ts
import { TimeSeriesBuffer } from "./buffer";

const buf = new TimeSeriesBuffer<number>(5);
[1, 2, 3].forEach(v => buf.push(v));
console.assert(JSON.stringify(buf.toArray()) === "[1,2,3]");

[4, 5].forEach(v => buf.push(v));
console.assert(JSON.stringify(buf.toArray()) === "[1,2,3,4,5]");

// 용량 초과 - 오래된 것 덮어쓰기
[6, 7].forEach(v => buf.push(v));
console.assert(JSON.stringify(buf.toArray()) === "[3,4,5,6,7]");

// useIncubatorStream.ts
import { useEffect, useState, useRef } from "react";
import { TimeSeriesBuffer } from "./buffer";

interface Sample {
  temp: number;
  co2: number;
  pH: number;
  timestamp: number;
  door_open?: boolean;
}

export function useIncubatorStream(wsUrl: string, windowSize: number = 120) {
  const [samples, setSamples] = useState<Sample[]>([]);
  const [connected, setConnected] = useState(false);
  const bufferRef = useRef(new TimeSeriesBuffer<Sample>(windowSize));

  useEffect(() => {
    const ws = new WebSocket(wsUrl);

    ws.onopen = () => {
      console.log("WebSocket 연결됨");
      setConnected(true);
    };

    ws.onmessage = (event) => {
      const data: Sample = JSON.parse(event.data);
      bufferRef.current.push(data);
      // React state에 새 스냅샷 전달
      setSamples(bufferRef.current.toArray());
    };

    ws.onclose = () => {
      console.log("WebSocket 종료");
      setConnected(false);
    };

    // Cleanup: 컴포넌트가 언마운트되면 연결 종료
    return () => {
      ws.close();
    };
  }, [wsUrl, windowSize]);

  return { samples, connected };
}

// IncubatorDashboard.tsx
import { useIncubatorStream } from "./useIncubatorStream";

function isCritical(latest: any): string | null {
  if (!latest) return null;
  if (latest.co2 < 4.5 || latest.co2 > 5.5) return `CO2 이상: ${latest.co2}%`;
  if (latest.temp < 36.5 || latest.temp > 37.5) return `온도 이상: ${latest.temp}°C`;
  if (latest.pH < 7.2 || latest.pH > 7.5) return `pH 이상: ${latest.pH}`;
  return null;
}

export function IncubatorDashboard() {
  const { samples, connected } = useIncubatorStream("ws://localhost:8765");
  const latest = samples[samples.length - 1];
  const warning = isCritical(latest);

  return (
    <div className="dashboard">
      <header>
        <h1>인큐베이터 A</h1>
        <span className={connected ? "connected" : "disconnected"}>
          {connected ? "실시간 연결됨" : "연결 끊김"}
        </span>
      </header>

      {warning && (
        <div className="warning-banner">
          ⚠️ 위험: {warning}
        </div>
      )}

      <section className="metrics">
        <MetricCard label="온도" value={latest?.temp} unit="°C" target={37.0} />
        <MetricCard label="CO2" value={latest?.co2} unit="%" target={5.0} />
        <MetricCard label="pH" value={latest?.pH} unit="" target={7.35} />
      </section>

      <section className="charts">
        <LineChart data={samples} field="temp" color="#ff6b6b" />
        <LineChart data={samples} field="co2" color="#4ecdc4" />
        <LineChart data={samples} field="pH" color="#95e1d3" />
      </section>
    </div>
  );
}

// integration.test.ts (Playwright/Cypress 통합 테스트 개념)
async function test_dashboard_flow() {
  // 1. 서버 시작 (test fixture)
  // 2. 브라우저에서 대시보드 로드
  // 3. 5초 안에 그래프에 최소 5개 포인트가 나타나야 함
  await waitFor(() => expect(chart.pointCount()).toBeGreaterThan(5));
  // 4. WebSocket 연결이 살아있음
  expect(document.querySelector(".connected")).toBeInTheDocument();
  // 5. 인위적으로 door_open=true 상태로 바꾸면 warning 배너 나타남
  await triggerDoorOpen(server);
  await waitFor(() => expect(document.querySelector(".warning-banner")).toBeInTheDocument());
}

서버 사이드 (Python):
  MockIncubator → sample() 반복 → WebSocket.send()
  파일: server.py

클라이언트 사이드 (React/TypeScript):
  useIncubatorStream(wsUrl)
    ├── WebSocket 연결 (useEffect)
    ├── TimeSeriesBuffer (useRef, O(1) push)
    └── samples 상태 (useState, 렌더 트리거)

  IncubatorDashboard
    ├── 연결 상태 표시
    ├── 경고 배너 (isCritical 함수)
    ├── MetricCard × 3 (현재 값)
    └── LineChart × 3 (60초 창)

  파일들: useIncubatorStream.ts, buffer.ts, IncubatorDashboard.tsx

폴링 방식 (매 1초 fetch):
  - 서버 부담: 클라이언트 N개 × 초당 1 요청 = N req/sec
  - 지연: 평균 0.5초 (polling 간격의 절반)
  - 대역폭: 매 요청에 HTTP 헤더 오버헤드 (~500 bytes)

WebSocket 방식 (연속 push):
  - 서버 부담: 연결 하나당 상시 유지 (소켓 1개, TCP 유지)
  - 지연: ~밀리초 (네트워크 왕복만)
  - 대역폭: 헤더 없이 payload만 (~80 bytes)