javascript - 使用 ReactJS+ChartJS+SSE 的实时应用

Question

我正在尝试构建 reactjs 应用程序。在这个应用程序中，我想使用 chartjs 通过订阅服务器发送的事件（SSE）来显示折线图。

当有来自 SSE 的新消息时，我想更新折线图。为此，我开发了下面的代码，但是当有新消息时图表没有更新。我正在控制台中打印新的消息值，我可以看到这些消息。但是我的图表没有实时更新。

例如，如果有来自 SSE 的新消息，则需要更新图表。

当我最小化浏览器并通过浏览器最大化时，该图表正在使用拉取的消息值进行更新。一旦客户端连接到我的 SSE 发出的服务器。

请在此处找到屏幕截图

这是代码

let xAxis =[];
let yAxis=[];
class LineChartComponent extends Component
{
   constructor(props) {     
    super(props);
    this.state ={
      data: []
     } 
     this.eventSource = new EventSource('http://mydomainname:8090/kafka-messages');    
   }
  componentWillMount() {
    this.eventSource.onmessage = (e) => this.updateChart(JSON.parse(e.data));   
  }

  updateChart(message){
    let trgTS =message.TrgTS;
    let value =parseFloat(100.0*message.Attributes[0].V/message.Attributes[1].V).toFixed(2);
      xAxis.push(trgTS);
      yAxis.push(value)
      console.log(trgTS,value); // I can see the new messages values in console 
      this.setState(Object.assign({}, {
        data: {
          labels:  xAxis,
          datasets:[
             {
                label:'cycle time',
                data: yAxis ,
                fill: false,
                borderColor: "#3cba9f"
              }
          ]
        }
      }));      
  }
   render()
   {
      return(
         <div>
            <Line data = {this.state.data} options = {{ maintainAspectRatio: false }} />
         </div>
      )
   }
}

标签： javascriptreactjschart.js