使用 Socket io 拖放

Question

我正在使用 node、express 和 socket io 创建一个多人纸牌游戏。我无法将一名玩家的拖放操作传递到连接的另一名玩家的屏幕上。

基本上我使用这个函数来处理客户端的 drop 事件。我得到移动卡的 ID，然后将其附加到移动的放置区

function handleBoxDrop(e) {
    const id = e.dataTransfer.getData('text');
    let dropzone = e.target;
    socket.emit('drop', id);

    socket.on('drop', (id) => {
      let temp = document.getElementById(id);
      dropzone.appendChild(temp);
    });

    e.dataTransfer.clearData();
  }

在服务器端我使用了这个：

o.on('connection', (socket) => {
  console.log('a user connected');
  socket.on('drop', (id) => {
    io.emit('drop', id);
  });
});

但是当我移动卡片时，卡片在其他浏览器上没有移动或移动到错误的位置。我不知道我做错了什么，请帮忙。谢谢：）

Answer 1

您需要将 socket.on 函数移到句柄放置函数之外

function handleBoxDrop(e) {
   '''your code'''
}

socket.on('drop', e => {
   '''append to dropzone'''
})

socket.on 方法创建一个监听器，并且只需要创建一次。您可以在实例化套接字对象后立即调用它。

const socket = websocket()
socket.on('drop', e => {})