// 素朴なポーリングによるアプローチ
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接続  │  │
   │   │ (初期フルデータ)   │              │ (受信 → 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)   # 1秒あたり2回プッシュ
    except websockets.ConnectionClosed:
        print("[-] クライアント接続が閉じられました")

async def main():
    async with websockets.serve(stream_handler, "localhost", 8765):
        print("サーバーを開始しました: ws://localhost:8765")
        await asyncio.Future()   # 永遠に実行

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);
    };

    // クリーンアップ: コンポーネントがアンマウントされたら接続を閉じる
    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. サーバー起動（テストフィクスチャ）
  // 2. ブラウザでダッシュボードをロード
  // 3. 5秒以内に、グラフに少なくとも5つのポイントが表示されること
  await waitFor(() => expect(chart.pointCount()).toBeGreaterThan(5));
  // 4. WebSocket接続が有効であること
  expect(document.querySelector(".connected")).toBeInTheDocument();
  // 5. door_open=trueに人為的に変更すると、警告バナーが表示されること
  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秒あたりのリクエスト1回 = Nリクエスト/秒
  - 遅延：平均0.5秒（ポーリング間隔の半分）
  - 帯域幅：リクエストごとにHTTPヘッダーのオーバーヘッド（〜500バイト）

WebSocket方式（継続的なプッシュ）：
  - サーバーの負荷：接続ごとに常時維持（ソケット1つ、TCP維持）
  - 遅延：〜ミリ秒（ネットワークの往復のみ）
  - 帯域幅：ヘッダーなし、ペイロードのみ（〜80バイト）