Динамическое обновление диаграммы с помощью socket.io в реальном времени - PullRequest
Новая
       32

Динамическое обновление диаграммы с помощью socket.io в реальном времени

0 голосов
/ 02 июня 2019

У меня есть базовый веб-сервер node.js. Подключенные клиенты могут отправлять значения на сервер. Сервер хранит их в массиве. Массив будет отправляться обратно клиенту каждые 1/25 секунды, и клиент рисует диаграмму с этим массивом. Таким образом, каждый клиент видит обновленный график в режиме реального времени. Но, к сожалению, клиенты не рисуют Диаграмму.

Что я пробовал: Клиент генерирует событие и отправляет значение на сервер. Сервер прослушивает это событие и сохраняет значение в массиве. С помощью setInterval сервер отправляет массив каждые 1/25 секунды клиенту. Клиент получает массив и рисует график.

client.js: 

var numbers = [];
var context = document.getElementById("chart");
var config = {
  type: 'doughnut',
  data: {
    datasets: [
       {
       backgroundColor: ['orange', 'blue', 'yellow'],
       data: numbers,
       borderWidth: 0,           
       }
    ]
  },
  options: {
       responsive: false,
  }    
}
var chart = new Chart(context, config);

const socket = io();

var someValue = 7;

socket.emit('add', someValue);

socket.on('update', (arr) => {
    numbers = arr;
    console.log(numbers);
});

server.js: 

const chartArray = [];

io.on('connection', (socket) => {
    socket.on('add', (data) => {
        chartArray.push(data);
    }); 

    setInterval(function() {
        socket.emit('update', chartArray);
    },1000/25);
});

Когда я регистрирую массив чисел в консоли клиента, он работает. Сервер отправляет массив каждые 1/25 секунды клиенту, и клиент получает массив. Но график не будет нарисован.

1 Ответ

0 голосов
/ 02 июня 2019

Поскольку вы не обновляете график 

chart.data.datasets.data = arr;
chart.update();
...