3

I need to transmit the touch position in Chrome for Android continuously to a Node.js server using Socket.io. However, I guess, the transmission is too fast. The first few values receive the server (For the first touch about six values, later only two or three values), then there seems to be a traffic jam. For many seconds the server receives nothing. Then, suddenly all missed values suddenly arrive at the server. But not continuously...

I think I must reduce the traffic from client to server by letting the client only emit in an interval of 500ms. This video demonstrates the last of the following options.

What I've tried so far (without success):

  • Wrapping a setInterval function around the emit function in the client code:

    setInterval( function(){ 
        Socket.emit( 'position', posX )
    }, 500); 
    
  • Regulating the emission with Date.now() in the client code:

    var timestamp = 0;
    
    // ...
    
    if (Date.now() - timestamp >= 500) {
        Socket.emit( 'position', posX );
        timestamp = Date.now();
    }
    
  • Throttling the touchmove event in the client code using the underscore library

    $('#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));
    

    Let me mention that this snippet logs posX both on a HTML div in the web page AND in the console of the server. The browser logs every 500ms as expected, but the server (through Socket.io) logs only in the beginning as expected, then break, then all missing values at once.

The project is on Github.

Any ideas how to realize a smooth (continuous) transmission?

Edit:

I figured out that this problem only exists with the Chrome browser on my Android phone and on my Android tablet. This application works fine for Firefox for Android, Opera for Android and Safari for iOs.

How can I outsmart Chrome?

10
  • Do you think that doing buffering in the destination and then replay the events in order could be a workaround?
    – rodrigoap
    Dec 15, 2015 at 20:48
  • 1
    you can create a vector from touch positions, calculate a line equation and just send the equation parameters to the server. It is not that accurate but it saves a lot of traffic.
    – Aᴍɪʀ
    Dec 15, 2015 at 20:49
  • @rodrigoap: Wouldn´t it be better to buffer data already on client side before being transmitted to server? Dec 15, 2015 at 20:59
  • 1
    @ Andrey Popov: This is a quite simple smart home application: you see a color wheel in a browser. An LED changes its color to the color of the color wheel at the touch position. I just simplified the code for pointing out the problem. Dec 15, 2015 at 23:05
  • 1
    Mind the Edit: This problem only exists with Chrome for Android! But why that?? Dec 15, 2015 at 23:29

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.