捕捉鼠标动作

Question

首先，一些背景：

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

曲线是鼠标移动，圆圈是点击或保持静止。

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

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

每个用户都应该有单独的文件。文件的格式没有预先确定，但以下是合理的：

<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等事件轻松捕获鼠标动作，在您提到的cmets中您知道如何执行此操作，因此我不会详细说明。

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

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

1. 检查（并获取）来自document.cookie 或localStorage 的唯一用户ID，如果没有，则生成一个（使用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 参数标识）。