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}

但是，扩展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＆＃39;它打印出来：

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

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

Answer 1

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

我建议你做的不是试图发送包含许多无法发送的事物的整个event对象（例如DOM对象），而是创建一个新对象并仅复制你实际的属性需要发送。并且，确保您发送的内容不包含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);
});

Answer 2

发送对象时尝试执行JSON.stringify（objectYouAreSending），并在收到对象时执行JSON.parse（objectYouHaveReceived）。

不是100％确定socket.io如何处理来回发送的对象，但这是我尝试的第一件事。 :)

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

2 个答案: