Как я могу получить данные в режиме реального времени с сервера, чтобы обновить мой график chartjs?

Question

Я использую chartjs для отображения потоковых данных с сервера. Я использовал ajax с php для получения данных каждую секунду, но я думаю, что это не лучшая идея. вот мой код JavaScript.

 $(document).ready(function(){
  $.getJSON({
    url: "http://localhost/chartJS/data.php",
    method: "GET",
    success: function(data) {
      console.log(data);
      var player = [];
      var score = [];

      $.each(data, function(key, value){
        player.push("Player "+value[0]);
        score.push(parseInt(value[1]));
       });

      var chartdata = {
        labels: player,
        datasets : [
          {
            label: 'Player Score',
            backgroundColor: 'rgba(200, 200, 200, 0.75)',
            borderColor: 'rgba(200, 200, 200, 0.75)',
            hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
            hoverBorderColor: 'rgba(200, 200, 200, 1)',
            data: score
          }
        ]
      };

      var ctx = $("#mycanvas");

      var barGraph = new Chart(ctx, {
        type: 'line',
        data: chartdata
      });
    },
    error: function(data) {
      console.log(data);
    }});
 updateChart();
});

function updateChart()
{
  var x=2;
  $(document).ready(function(){
  $.getJSON({
    url: "http://localhost/chartJS/data.php?x="+x,
    method: "GET",
    success: function(data) {
      console.log(data);
      var player = [];
      var score = [];

      $.each(data, function(key, value){
        player.push("Player "+value[0]);
        score.push(value[1]);
       });
      var chartdata = {
        labels: player,
        datasets : [
          {
            label: 'Player Score',
            backgroundColor: 'rgba(200, 200, 200, 0.75)',
            borderColor: 'rgba(200, 200, 200, 0.75)',
            hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
            hoverBorderColor: 'rgba(200, 200, 200, 1)',
            data: score
          }
        ]
      };

      var ctx = $("#mycanvas");

      var barGraph = new Chart(ctx, {
        type: 'line',
        data: chartdata,
      });
    },
    error: function(data) {
      console.log(data);
    }
  });
});
setTimeout(function(){updateChart()}, 1000);
}

я слышал о websocket, но я не знаю, стоит ли мне его использовать или нет и если да, как я могу получать данные непрерывно каждый раз, когда открываю диаграмму.

Answer 1

Я думаю, что вы ищете интервал:

Метод setInterval () вызывает функцию или вычисляет выражение с заданными интервалами (в миллисекундах).

Пример:

setInterval(function(){ alert("Hello"); }, 3000);

Выдает предупреждение каждые 3 секунды.

Так что в вашем случае просто установите ajax-вызов внутри интервала и вызывайте его каждые 1000 миллисекунд, а затем модифицируйте график новыми данными.