实时流数据反应

问题描述

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

import 'chartjs-plugin-streaming';
import socketIOClient from "socket.io-client";
const ENDPOINT = "http://127.0.0.1:4001";
const data = {
  datasets: [
    {
      label: "Dataset 1",borderColor: "rgb(255,99,132)",backgroundColor: "rgba(255,132,0.5)",lineTension: 0,borderDash: [8,4],data: []
    }
  ]
};



function App() {
  const [first,setfirst] = useState('');
  const socket = socketIOClient(ENDPOINT);
  const options = {
    scales: {
      xAxes: [
        {
          type: "realtime",realtime: {
            onRefresh: function() {
              socket.on("a",a => {
                setfirst(a);
              });
              data.datasets[0].data.push({
                x: Date.Now(),y: first
              });
            },delay: 1
          }
        }
        

        ],yAxes: [{
                            display: true,ticks: {
                                beginAtZero: true,steps: 10,stepValue: 5,max: 100
                            }
                        }]
      
    }
  };


  return (
    <div>
        <Line data={data} options={options} />
      </div>
  );
}

export default App;

我有这个客户端代码，但是如果我将 math.random() 函数放在 Y 中而不是我的套接字数据中，我无法将其可视化，它工作正常，但是一旦我提供此数据，它就什么也没有。它的值停留在 0。

注意：- 服务器运行良好，我使用 socket.io-client 获取数据，因此无需担心可视化时出现的主要问题

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）