Заполнение массива данными с сервера и отправка клиенту
У меня есть график, взятый из этого примера и запущенный на написанным мной NodeJs сервере. На данном графике, отображаются определенные значения любого характера по отношению к времени. Как мы видим, у нас есть две оси - X и Y. В примере, значения для оси Y генерируются рандомно, а для оси X используются текущие временные метки:
А вот как выглядит этот кусок кода:
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
// Первая линия
data: [],
label: 'Dataset 1',
borderColor: 'rgb(255, 99, 132)',
backgroundColor: 'rgba(255, 99, 132, 0.5)',
lineTension: 0,
borderDash: [8, 4]
}, {
// Вторая линия
data: [],
label: 'Dataset 2',
borderColor: 'rgb(54, 162, 235)',
backgroundColor: 'rgba(54, 162, 235, 0.5)'
}, {
// Третья линия
data: [],
label: 'Dataset 3',
borderColor: 'rgb(54, 102, 235)',
backgroundColor: 'rgba(14, 62, 25, 0.5)'
}]
},
options: {
scales: {
xAxes: [{
type: 'realtime',
realtime: {
onRefresh: function(chart) {
chart.data.datasets.forEach(function(dataset) {
dataset.data.push({
x: Date.now(), // Текущая временная метка
y: Math.random(), // Генерация случайного числа
});
});
},
}
}]
}
}
});
Вопрос заключается в том, как мне самому пополнить эти значения в реальном времени. У меня они хранятся в базе данных. Я понимаю, что я должен сначала запросить эти данные у сервера, сервер должен обратиться к базе данных, для получения этих данных, обработать эти данные и отправить на обработку клиетну. Но как это сделать, я не знаю, а именно:
- Как отправить эти данные клиенту
- Каким образом клиент должен получить эти данные
Я так понимаю, я должен буду обрабатывать GET заявки ?
Ответы (2 шт):
Тут эффективней сокетов будут Server Sent Events, учитывая что соединения достаточно однонаправленного. Вот нодовский модуль для SSE.
В начале скрипта в соответствии с доками инициализируете SSE-сессию, затем в колбеке onRefresh отправляете новые значения в json-объекте. Клиент будет в реалтайме все получать и обрабатывать
Если данные раз в секунду и реже, то пойдет GET (если с высоким fps -- websocket/SSE, но там с обрывом соединения возиться).
На всякий случай в адрес можно время добавлять (чтоб не закэшировалось).
Пример "Pull Model (Polling Based) - Asynchronous": https://github.com/nagix/chartjs-plugin-streaming
Про GET и БД должно быть тут:
