Capturing mouse actions

Question

First, some background:

I need to develop a web app that will in background collect all mouse actions by a user (during a visit to a web page), store them in appropriate format in a file, and than have a separate replay app that will be fed with that file, and will produce something like this:

Curves are mouse movements, circles are either clicks or staying stationary.

I have more or less solution for replay app.

I need a solution that captures user mouse actions and saves it in a file on server.

For each user there should be separate file. Format of the file is not predetermined, but following would be reasonable:

<timestamp1> MOVE TO <x1>, <y1>
<timestamp2> MOVE TO <x2>, <y2>
<timestamp3> MOVE TO <x3>, <y3>
<timestamp4> CLICK
<timestamp5> RIGHT-CLICK
<timestamp6> MOVE TO <x6>, <y6>
<timestamp7> MOVE TO <x7>, <y7>

I wonder if you could help me on approach how to design and implement such mouse action capture. All best.

Answer 1

You can easily capture the mouse actions using the click, mousemove, etc. events, in the comments you mentioned you know how to do this, so I'll not detail this.

You can't directly `open' a file on the server, since the code is executed on a completely different machine (ie. the client), so what you'll need to do is send the data from the client to the server every second, or every few seconds.

There are several ways of doing this, here's one way:

1. Check (& get) a unique userid from document.cookie, or localStorage, if there isn't one, generate one (using Date() and/or Math.random())

2. Bind events to capture the mouse actions, these events write data (in the format you want) to the Array window.captureMouse.

3. Send an Ajax request to the server every second (depending on the amount of users, speed of server, you may want to change the interval).

A piece of example code might illustrate the idea better (using jQuery)

userId = fetchOrSetUserId()   // Make this function

captureMouse = []
$('#id').on('click', function(e) {
    captureMouse.push({
        event: 'click',
        target: $(this).attr('id'),
    })
})

// ... more events ...

sendData = function() {
    // You probably need to do locking here, since captureMouse may be changed in an event before it's reset
    send = captureMouse
    captureMouse = []

   jQuery.ajax({
       url: '/store-data',
       type: 'post',
       data: {
           userId: userId,
           captureMouse: JSON.stringify(send)
       },
       success: function() {
           // Once this request is complete, run it again in a second ... It keeps sending data until the page is closed
           setTimeout(sendData, 1000)
       }
   })
}

// Start sending data
sendData()

On your server, you'll get captureMouse as POST, you will need to decode JSON and append it to a file (which is identified using the userId parameter).