Обработчик событий ввода-вывода Socket в componentDidMount / componentDidUpdate React JS - PullRequest
Новая
       26

Обработчик событий ввода-вывода Socket в componentDidMount / componentDidUpdate React JS

0 голосов
/ 04 марта 2020

У меня есть обработчик событий сокета io, который получает данные каждую секунду. При загрузке страницы, как вызвать componentDidMount или componentDidUpdate в обработчике событий?

Или есть ли другой способ вызова обработчика событий внутри componentDidMount или componentDidUpdate?

Я не знаю, как это сделать связать обработчик событий с жизненным циклом в реаги js (поэтому график будет обновляться каждый раз, когда новые данные поступают в обработчик событий) 

constructor(props) {
super(props);
this.state = { 
  trafficFlow: [],
  cameraId: this.props.cameraId,
  cameraIp: this.props.cameraIp,
  ReceivedDateTime: '',
  QueueLength: '',
 };

 this.globals = new Globals();
 this.socketIO = new Socket_IO();
 this.socketIO.SubscribeSocket_IO = this.handleSocketIOMessage;
}

handleSocketIOMessage = (eventTitle, message) => {
var self = this;

switch (eventTitle) {
  case "trafficFlow":
    // console.log("handleSocketIOMessage: eventTitle=" + eventTitle + ", message=" + message);
    var trafficFlowParse = JSON.parse(message);
    var ReceivedDateTime = new Date(trafficFlowParse.ReceivedDateTime);
    var Time = ReceivedDateTime.getHours() +  ":" +  (ReceivedDateTime.getMinutes()<10?'0':'') + ReceivedDateTime.getMinutes();
    //var QueueLength = trafficFlowParse.QueueLength;


    trafficFlowParse.ReceivedDateTime = Time;

    self.setState({ trafficFlow: trafficFlowParse});
    console.log(this.state.trafficFlow);

    //self.setState({ Time: trafficFlowParse.Time, QueueLength: trafficFlowParse.QueueLength});
    //self.setState({ trafficFlow: Time});
    //console.log("Time : " + this.state.trafficFlow);
    //console.log("Received Date Time : " + Time);
    //console.log("Queue Length : " + QueueLength);
    break;
 }
};

componentDidMount() {
//this.handleSocketIOMessage();
}

componentDidUpdate() {

}
...