1

首先，一些背景：

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

在此处输入图像描述

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

我或多或少有重播应用程序的解决方案。

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

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

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

我想知道您是否可以帮助我了解如何设计和实现这种鼠标动作捕捉。最好的。

4

1 回答 1

4

click您可以使用,等事件轻松捕获鼠标操作mousemove，在您提到的评论中您知道如何执行此操作，因此我不会详细说明。

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

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

  1. 检查（并获取）来自 的唯一用户 ID document.cookie，或者localStorage，如果没有，则生成一个（使用Date()和/或Math.random()）

  2. 绑定事件以捕获鼠标动作，这些事件将数据（以您想要的格式）写入 Array 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()

在您的服务器上，您将获得captureMousePOST，您需要解码 JSON 并将其附加到文件（使用 userId 参数标识）。

于 2014-01-24T10:28:34.607 回答