Непрерывная передача данных из Chrome для Android на сервер Node.js с использованием Socket.io

Мне нужно передавать положение касания в Chrome для Android постоянно на сервер Node.js с помощью Socket.io. Однако, я думаю, передача слишком быстрая. Первые несколько значений получает сервер (За первое касание около шести значений, позже только два-три значения), потом вроде пробка. В течение многих секунд сервер ничего не получает. Затем внезапно все пропущенные значения внезапно поступают на сервер. Но не непрерывно...

Я думаю, что должен уменьшить трафик от клиента к серверу, позволив клиенту излучать только с интервалом в 500 мс. В этом видео демонстрируется последний из следующих вариантов.

Что я пробовал до сих пор (без успеха):

  • Обертывание функции setInterval вокруг функции emit в клиентском коде:

    setInterval( function(){ 
        Socket.emit( 'position', posX )
    }, 500); 
    
  • Регулировка эмиссии с помощью Date.now() в клиентском коде:

    var timestamp = 0;
    
    // ...
    
    if (Date.now() - timestamp >= 500) {
        Socket.emit( 'position', posX );
        timestamp = Date.now();
    }
    
  • Регулирование события touchmove в клиентском коде с помощью библиотеки underscore

    $('#canvas').on("touchmove", _.throttle(function (ev) {
        var e = ev.originalEvent;
        var posX = logCounter + " : " + e.targetTouches[0].pageX;
        $('#div').text(posX);
        socket.emit('position', posX);
        logCounter++;
        return false;
    }, 500));
    

    Позвольте мне отметить, что этот фрагмент регистрирует posX как HTML div на веб-странице И в консоли сервера. Браузер логирует каждые 500мс как положено, но сервер (через Socket.io) логирует только в начале как положено, потом перерыв, потом все пропущенные значения сразу.

Проект находится на Github.

Любые идеи, как реализовать плавную (непрерывную) передачу?

Изменить:

Я выяснил, что эта проблема существует только с браузером Chrome на моем телефоне Android и на планшете Android. Это приложение отлично работает с Firefox для Android, Opera для Android и Safari для iOS.

Как я могу перехитрить Chrome?


person wurstbrotrest    schedule 15.12.2015    source источник
comment
Считаете ли вы, что выполнение буферизации в месте назначения, а затем воспроизведение событий по порядку может быть обходным путем?   -  person rodrigoap    schedule 15.12.2015
comment
вы можете создать вектор из позиций касания, рассчитать линейное уравнение и просто отправить параметры уравнения на сервер. Это не так точно, но экономит много трафика.   -  person Aᴍɪʀ    schedule 15.12.2015
comment
@rodrigoap: не лучше ли буферизировать данные уже на стороне клиента перед их передачей на сервер?   -  person wurstbrotrest    schedule 15.12.2015
comment
@ Амир: Отличная идея. Как бы вы это сделали?   -  person wurstbrotrest    schedule 15.12.2015
comment
Самый главный вопрос — что вы делаете с данными? Если просто хранить - вариантов много. Если нужно показать другим - много проблем :)   -  person Andrey Popov    schedule 16.12.2015
comment
Если вы буферизуете данные на стороне клиента, а затем передаете их, вы находитесь в том же месте. Возьмем, к примеру, буферизацию видео, вы видите ее как континуум, а на самом деле это не так.   -  person rodrigoap    schedule 16.12.2015
comment
@ Андрей Попов: Это довольно простое приложение для умного дома: вы видите цветовой круг в браузере. Светодиод меняет свой цвет на цвет цветового круга в месте касания. Я просто упростил код для указания на проблему.   -  person wurstbrotrest    schedule 16.12.2015
comment
Помните об изменении: эта проблема существует только с Chrome для Android! Но почему это??   -  person wurstbrotrest    schedule 16.12.2015
comment
@wurstbrotrest Похоже, есть проблемы с тем, как Chrome обрабатывает touchmove. Вы пробовали ev.preventDefault() в своем обработчике?   -  person Gary    schedule 18.12.2015
comment
Да, я пробовал это раньше, но ev.preventDefault() не совместим с функцией throttle, поэтому вместо этого я использую return false.   -  person wurstbrotrest    schedule 20.12.2015