使用 socket.io 发送鼠标点击事件

Question

我正在尝试使用 socket.io 和 node.js 从客户端向服务器发出鼠标单击事件。问题是发出后，我发送的词典没有作为一个整体发送。这是我的代码：

客户端：

document.addEventListener('click', function(event){
 console.log("event sent", event.target,event);
 var target = event.target;
 var myClick = {id: target, event: event};
 console.log(myClick);
 socket.emit('myClick', myClick);
})

socket.on('myClick', function(data){
  console.log("event received", data);
  document.querySelectorAll(data.id).dispatchEvent(data.event);
});

在正文上注册点击事件后，控制台会记录此信息：

event sent <body>…</body> 
MouseEvent {isTrusted: true, screenX: 1145, screenY: 499, clientX: 1040, clientY: 398…}
Object {id: body, event: MouseEvent}

其他页面在收到事件后记录此信息：

event received Object {id: Object, event: Object}

然而，展开对象给我们这个：

event: Object
  isTrusted: true
  __proto__: Object
id: Object
  __proto__: Object
__proto__: Object

所以它没有接收到整个事件并且 id 没有事件目标。

服务器端：

io.sockets.on('connection', function (socket) {
  console.log("socket connected");
  console.log(socket);
  socket.on('myClick', function (data) {

    console.log("myClick in server.js");
    console.log(socket);
    console.log(data);
    socket.broadcast.emit('myClick', data);
});
});

当服务器在 'myClick' 上接收到某些内容时，它会打印出以下内容：

myClick in server.js
{ id: {}, event: { isTrusted: true } }

如您所见，目标是空的，应该是完整的事件对象只有 isTrusted 值。有没有人遇到过这个问题？任何帮助，将不胜感激。我尝试这样做的方式是基于 this Stack Overflow 答案，但他们使用的是 jQuery 而我只是使用 Javascript.

Answer 1

尝试在发送对象时执行 JSON.stringify(objectYouAreSending)，在接收对象时执行 JSON.parse(objectYouHaveReceived)。

不能 100% 确定 socket.io 如何处理来回发送的对象，但这是我首先要尝试的事情。 :)

Answer 2

socket.io 尝试将您传递给它的参数转换为 JSON。 DOM 对象无法转换为 JSON 并且会触发错误或导致事情被忽略。所以，你不能发送 event.target。这是一个 DOM 对象，您不能将 DOM 对象发送到您的服务器。您必须发送可以转换为字符串的内容。例如，您可以发送 event.target.id.

我建议您做的是，与其尝试发送包含许多无法发送的内容（例如 DOM 对象）的整个 event 对象，不如创建一个新对象并复制只是您实际需要发送的属性。并且，确保您发送的内容不包含 DOM 对象，并且不包含任何循环引用或其他无法转换为 JSON.

的内容

我不确切知道您需要 event 对象的哪些属性，但总体思路如下：

document.addEventListener('click', function(event){
  // create new object with just the things we need from the event object
  // this must contain only things that can be converted into JSON
  var clickData = {
     id: event.target.id, 
     timeStamp: event.timeStamp,
     type: event.type,
     clientX: event.clientX,
     clientY: event.clientY
  };
  socket.emit('myClick', clickData);
});

使用 socket.io 发送鼠标点击事件

Sending mouse click events using socket.io

javascript

sockets

node.js

dom-events

socket.io