小编use*_*872的帖子

我正在尝试构建 Reactjs 应用程序。在此应用程序中，我想使用 Chartjs 通过订阅服务器发送的事件（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" …