Javascript 使用socket.io发送鼠标单击事件_Javascript_Node.js_Sockets_Socket.io_Dom Events

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

javascript node.js sockets socket.io

Javascript 使用socket.io发送鼠标单击事件,javascript,node.js,sockets,socket.io,dom-events,Javascript,Node.js,Sockets,Socket.io,Dom Events,我正在尝试使用socket.io和node.js从客户端向服务器发送鼠标单击事件。问题是，在发出之后，我正在发送的词典并不是作为一个整体发送的。这是我的密码：客户端： document.addEventListener('click', function(event){ console.log("event sent", event.target,event); var target = event.target; var myClick = {id: target,

我正在尝试使用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);
});

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);
});
});

在主体上注册单击事件后，控制台会记录此事件：

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

然而，扩展对象给了我们以下信息：

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

因此它没有接收整个事件，并且id没有事件目标

服务器端：

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);
});

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

值。以前有人遇到过这个问题吗？任何帮助都将不胜感激。我尝试这样做的方式是基于堆栈溢出应答，但他们使用jQuery，我只是使用Javascript。

发送对象时尝试执行JSON.stringify（objectyouaresend），接收对象时尝试执行JSON.parse（objectyouhavereceive）

无法100%确定socket.io如何处理来回发送的对象，但这是我要尝试的第一件事。：）

socket.io尝试将您传递给它的参数转换为JSON。有些东西，比如DOM对象，无法转换为JSON，或者触发错误，或者导致忽略某些东西。因此，您无法发送

事件.target

。它是一个DOM对象，不能将DOM对象发送到服务器。您必须发送可以转换为字符串的内容。例如，您可以发送

event.target.id

我建议您不要尝试发送整个

事件

对象，因为该对象包含许多无法发送的内容（例如DOM对象），而是创建一个新对象并复制实际需要发送的属性。并且，确保您发送的内容不包含DOM对象，也不包含任何循环引用或其他无法转换为JSON的内容

我不知道您需要

事件

对象中的哪些属性，但这里是“总体思路：

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);
});

我刚刚将侦听器中的代码更改为：

var myClick={id:target，event:event}；myClick=JSON.stringify（myClick）；console.log（myClick）；emit（'myClick'，myClick）不幸的是，console.log（myClick）打印出{“id”：{}，“event”：{“isTrusted”：true}（这是在发送对象之前打印出来的）。这可能是一个关于如何在socket.io中将字典转换为JSON的问题吗？谢谢！我想要发出整个事件的原因是因为我想要将相同的事件发送到其他页面。对于如何仅使用JavaScript实现这一点，您有什么建议吗？我现在想到的是发送X和Y位置，并在接收端创建一个新事件并发送该新事件。@Faisal-是的，您必须只捕获有关单击位置（位置或单击对象）的相关信息然后将该信息发送给其他客户端，在那里他们可以尝试模拟相同的动作。请记住，您不能发送DOM对象。但是，您可以发送标识信息（如id），其他客户端可以使用这些信息来知道引用了哪个DOM对象。