React chartsJS流式传输实时数据

const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });

setInterval(() => {
  const data = { time: new Date(), value: Math.random() * 100 };
  wss.clients.forEach(client => {
    if (client.readyState === WebSocket.OPEN) {
      client.send(JSON.stringify(data));
    }
  });
}, 1000);

import React, { useEffect, useRef } from 'react';
import { Line } from 'react-chartjs-2';

const RealTimeChart = () => {
  const chartRef = useRef(null);
  const [data, setData] = React.useState({
    labels: [],
    datasets: [
      {
        label: 'Real-time Data',
        data: [],
        fill: false,
        borderColor: 'rgb(75, 192, 192)',
        tension: 0.1
      }
    ]
  });

  useEffect(() => {
    const ws = new WebSocket('ws://localhost:8080');

    ws.onmessage = (event) => {
      const newData = JSON.parse(event.data);
      setData(prevData => ({
        labels: [...prevData.labels, newData.time],
        datasets: [{
          ...prevData.datasets[0],
          data: [...prevData.datasets[0].data, newData.value]
        }]
      }));
    };

    return () => ws.close();
  }, []);

  return (
    <Line ref={chartRef} data={data} options={{ responsive: true }} />
  );
};

export default RealTimeChart;