React ile Gercek Zamanli Dashboard

Kurulum

npm create vite@latest dashboard -- --template react-ts
npm install recharts

WebSocket Hook

function useWebSocket(url: string) {
    const [veri, setVeri] = useState<any[]>([]);
    const [bagli, setBagli] = useState(false);

    useEffect(() => {
        const ws = new WebSocket(url);
        ws.onopen    = () => setBagli(true);
        ws.onclose   = () => setBagli(false);
        ws.onmessage = (e) => {
            const yeni = JSON.parse(e.data);
            setVeri(p => [...p.slice(-50), yeni]);
        };
        return () => ws.close();
    }, [url]);

    return { veri, bagli };
}

Grafik

import { LineChart, Line, XAxis, YAxis, Tooltip, ResponsiveContainer } from 'recharts';

function Grafik({ veri }: { veri: any[] }) {
    return (
        <ResponsiveContainer width='100%' height={300}>
            <LineChart data={veri}>
                <XAxis dataKey='zaman' />
                <YAxis />
                <Tooltip />
                <Line type='monotone' dataKey='sicaklik' stroke='#f97316' dot={false} />
            </LineChart>
        </ResponsiveContainer>
    );
}

React + WebSocket gercek zamanli gorselleştirme icin en pratik yoldur.