捕获鼠标动作

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的唯一用户ID，如果没有，则生成一个（使用Date()和/或{{ 1}}）

2. 绑定事件以捕获鼠标操作，这些事件将数据（以您希望的格式）写入数组Math.random()。

3. 每秒向服务器发送一次Ajax请求（取决于用户数量，服务器速度，您可能想要更改间隔）。

一段示例代码可以更好地说明这个想法（使用jQuery）

window.captureMouse

在您的服务器上，您将获得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() 作为POST，您将需要解码JSON并将其附加到文件（使用userId参数标识）。