LINUX.ORG.RU

websocket + pagination

 , , ,


0

1

Я хочу выводить в график данные, которые посредством вебсокета передаются клиенту. Итак, передаем серверу {start: 0, end: 100}

{start: 0, end: 100}
{start: 100, end: 200}

Сервер отдает

{data: [{}], count: 554291}

1. Нужно на основании count останавливаться

2. Работа с вебсокетами асинхронная и поэтому не получится(скелетон, нет проверки первого пункта)

        var ws = new WebSocket('ws://' + window.location.hostname + ':8001/chart/');

        var wsSend = function(data) {
          if (!ws.readyState) {
            setTimeout(function() {
              wsSend(data);
            }, 100);
          } else {
            ws.send(data);
          }
        };
        // wsSend('{"count": 12, "offset": 0}');


        // обработчик входящих сообщений
        ws.onmessage = function(event) {
          if (event.data) {
            wsRecv(event.data);
          };
        };

        function sleep1(ms) {
          return new Promise(resolve => setTimeout(resolve, ms));
        }

        // get data from srv
        async function getData(start, end) {
          var start = start;
          var end = end;
          for (var i = 0; i < 100; i++) {
            console.log('start: ' + start + " " + 'end: ' + end);
          start += 100;
          end = start + 100;
            wsSend(JSON.stringify({
              "offset": start,
              "count": end
            }));
          };
        };

        function wsRecv(msg) {
          var res = JSON.parse(msg);
          // console.log(res[0]['data'].length);
          for(var i = 0; i < res[0]['data'].length; i++) {
            data.addRow(['test ' + i, res[0]['data'][i]['cur_usd']]);
          };
          drawChart();
        }

        drawChart();
        getData(0,100);

Google chart не умеет сортировать данные при data.addRow(), поэтому надо где-то данные хранить и сортировать их. Или вообще как решать эту задачу?


Работа с вебсокетами асинхронная

Чего? Вебсокет дал данные клиенту, клиент их обработал. Клиент не запрашивает данные напрямую, так что тут никакой синхронности\асинхронности.

Google chart не умеет сортировать данные при data.addRow(), поэтому надо где-то данные хранить и сортировать их.

Вопрос «где хранить данные»? Да где угодно, хоть в локалсторадже.

micronekodesu ★★★ ()

Так, с сортировкой там всё нормально. Тут еще дополнительный вопрос есть. Как же всё-таки выстроить алгоритм пагинации, если функция getData ничего не знает о том, какое кол-во объектов в бд?

Xwo ()
Ответ на: комментарий от Xwo

Ответ бекенда должен содержать максимальный номер страницы или кол-во записей или булевый флаг «у меня пока есть, можешь попросить еще» (по вкусу). Так фронт может принять решение как и что делать дальше.

Пагинация на вебсокетах? Смузи много принял? Ну делай раз делаешь. Я бы обычным аяксом делал.

if (!ws.readyState) {setTimeout(function() {...}, 100);

Так его! Иш чо удумал — простаивать!!!

UPD: А, ну так есть же в ответе кол-во записей. В чем проблема то?

deep-purple ★★★★★ ()
Последнее исправление: deep-purple (всего исправлений: 1)
Ответ на: комментарий от deep-purple

Мне кажется ОП хочет сразу нашлепать разметку страничек, а не добавлять их по мере поступления данных. Если так, то это фиговая идея сама по себе, или данные не должны меняться (ну и тогда можно втупую попросить бэкенд вернуть «count (*) from datatable»)

micronekodesu ★★★ ()
Ответ на: комментарий от deep-purple

А, ну так есть же в ответе кол-во записей. В чем проблема то?

В ответе есть ключ {'count': xxxx}, но вопрос, как в функцию, которая делает запросы, передать эту информацию ?

Этим? Или есть еще какие-то способы это сделать?

localStorage.setItem('message', 'Привет, ЛОР!');
alert(localStorage.getItem('message'));

Вся загвоздка в том, что вебсокеты на ивентах, я не могу написать что-то типа

// первая итерация
ret = sendData(0,100)
{
return recvData(); // которая вернет {'count': xxx, 'start': xxx, 'end': xxx}
}
цикл for с ret['count'] {
sendData(ret['start', ret['end']);
}

Тут или в редисе это хранить или в мемкеше, но это оверхед. Где-то надо хранить эти данные, чтобы ws.onmessage мог туда писать, а sendData могла оттуда их читать

Xwo ()
Последнее исправление: Xwo (всего исправлений: 4)
Ответ на: комментарий от Xwo

редис, мемкеш

Не надо выражаться словами не имеющими отношения к проблеме.

но вопрос, как в функцию, которая делает запросы, передать эту информацию?

Так ты жаваскрипт программист или где?

deep-purple ★★★★★ ()

React+Redux+Saga

Реакт для отрисовки, редакс для состояния, сага для сайд-эффектов.

Все будет аккуратно перестраиваться на лету, как только данные будут поступать.

nihirash ★★★ ()
Ответ на: комментарий от deep-purple

так я и спрашиваю, как решить эту проблему на уровне клиента. Ага, ступил, в клиенте же работаем.

Xwo ()
Последнее исправление: Xwo (всего исправлений: 1)
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.