Javascript二进制文件到服务器

Question

Im trying to figure out what a highly scalable solution (serving multiple users of 10000+) would be.

Goal: What I want to achieve is to write a stream of mouse coordinates to a binary file to a server, ie the server is directly saved to the server from the userinteraction once stream is closed. The coordinates should be pushed every 20ms (about 50fps) to create a close representation of the mouse movement.

a) I know that nodeJS can be used to do a writestream, but I am not sure if such a high frequency of updates can be handled by such a structure - also if this is done by multiple users, this approach could fall apart.

b)The other possibility would be to locally write the file into binary and then upload it to the server afterwards.

Can anyone comment on the capabilities of these approaches and if there is another method that can be used?

Answer 1

Based on your comment that the server does not need the data in real-time, you should definitely not send the data to the server every 20ms. Save it on the client and send it in chunks, say every 30 or 60 seconds. This can be done in memory in an array. Saving mouse coordinates is not very intensive.

Once you're ready to send it, I think you'll find XMLHttpRequest sufficiently fast enough for your needs.

This demo shows how to capture to coordinates and shows that 50fps is doable (I get up to 60fps in Chrome on OS X).

Demo: http://jsfiddle.net/ThinkingStiff/2Ls3A/

var coordinates = [],
    count = 0,
    SECONDS = 1000,
    INTERVAL = 5; 

window.onmousemove = function ( event ) {

    //move cursor over page for at least 10 secs for an accurate reading
    coordinates.push( [event.pageX, event.pageY] );

};

window.setInterval( function () {

    console.log( ( coordinates.length - count ) / INTERVAL + 'fps' );
    count = coordinates.length;

}, INTERVAL * SECONDS ); 

If you really think you need more efficiency in the sending of the data, the lowest-latency method to connect a client and server computer over the internet is a persistent TCP socket. This is available in HTML through the WebSocket API .

There are libraries in just about every server-side language that handle the end-point using the ws: URL schema ( wss: for secure), socket.io for example.

Client:

var socket = new WebSocket('ws://example.com/endpoint' );

socket.onopen = function () {

    socket.send( 'send some text' );

};

Answer 2

I would think a better solution is to store the points into an array, and then turn around and send it to the server.

At this point you need to start a new object and have it get the new updates, when you go into the function to send to the server, this way, during the time that you are preparing and sending the data, and getting a response, you can still be collecting data.

But, you probably won't get 50fps, but you can test on different browsers and see what frame rate is reasonable to expect.