捕捉鼠标动作

Question

首先是一些背景：

我需要开发一个web应用程序，它将在后台收集用户的所有鼠标操作(在访问网页期间)，将它们以适当的格式存储在文件中，而不是有一个单独的重放应用程序，该应用程序将被输入该文件，并将产生如下内容：

​

​

曲线是鼠标运动，圆圈不是点击就是静止。

我有或多或少的重放应用的解决方案。

我需要一个解决方案，捕捉用户鼠标操作并将其保存在服务器上的文件中。

对于每个用户，应该有单独的文件。文件的格式不是预先确定的，但以下内容是合理的：

<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>

我想知道你能否帮助我如何设计和实现这样的鼠标动作捕捉。一切都很好。

Answer 1

您可以使用click、mousemove等事件轻松捕获鼠标操作，在您所提到的知道如何做到这一点的注释中，因此我将不详细说明这一点。

您不能直接“打开”服务器上的文件，因为代码是在完全不同的机器上执行的(即。，所以您需要做的是每秒钟或每隔几秒钟将数据从客户机发送到服务器。

有几种方法可以做到这一点，这里有一种方法：

1. 从document.cookie或localStorage (如果没有)检查(& get)唯一的用户if，生成一个(使用Date()和/或Math.random())
2. 绑定事件以捕获鼠标操作，这些事件将数据(以您想要的格式)写入数组window.captureMouse。
3. 每秒钟向服务器发送Ajax请求(取决于用户数量、服务器速度，您可能希望更改间隔)。

一段示例代码可以更好地说明这个想法(使用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()

在您的服务器上，您将获得captureMouse作为POST，您将需要解码JSON并将其附加到一个文件中(该文件使用userId参数标识)。