Заполнение массива данными с сервера и отправка клиенту

У меня есть график, взятый из этого примера и запущенный на написанным мной 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 шт):

Автор решения: artomich

Тут эффективней сокетов будут Server Sent Events, учитывая что соединения достаточно однонаправленного. Вот нодовский модуль для SSE.
В начале скрипта в соответствии с доками инициализируете SSE-сессию, затем в колбеке onRefresh отправляете новые значения в json-объекте. Клиент будет в реалтайме все получать и обрабатывать

→ Ссылка
Автор решения: Sergei Kirjanov

Если данные раз в секунду и реже, то пойдет GET (если с высоким fps -- websocket/SSE, но там с обрывом соединения возиться).

На всякий случай в адрес можно время добавлять (чтоб не закэшировалось).

Пример "Pull Model (Polling Based) - Asynchronous": https://github.com/nagix/chartjs-plugin-streaming

Про GET и БД должно быть тут:

https://expressjs.com/ru/starter/basic-routing.html

https://expressjs.com/ru/guide/database-integration.html

→ Ссылка