使用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>
      )
   }
}