a-frame networked - 如何将头像与广播客户端匹配？

Question

我正在使用 aframe-networked，我正在用户之间发送一些自定义数据：

// sender
NAF.connection.broadcastDataGuaranteed(dataType, data)
// all recipients listen
NAF.connection.subscribeToDataChannel(dataType, (senderId, type, data, target) => {})

但是我无法确定哪个头像实体对应于广播客户端。接收者如何从回调中知道哪个玩家是 sender？

Answer 1

一种方法是使用 aframe-networked events，并将所有连接的用户保存在字典中。 creatorID、ownerId 和 networkId 都保存在 networked 组件中 - 所以您只需在创建头像后获取它们：

const usersMap = {};

// Fired when a networked entity is created 
document.body.addEventListener("entityCreated", function(evt) {
  const networkedComponent = evt.detail.el.getAttribute("networked");
  usersMap[networkedComponent.creator] = {
    networkId: networkedComponent.networkId,
    el: evt.detail.el
  };
});

// Fired when another client disconnects from you   
document.body.addEventListener("clientDisconnected", function(evt) {
  if (usersMap[evt.detail.clientId]) delete usersMap[evt.detail.clientId];
});

现在，每次您从广播消息中收到回调（通过 NAF.connection.subscribeToDataChannel(dataType, callback)），您都可以轻松跟踪属于发件人的实体：

// change the senders color to blue
NAF.connection.subscribeToDataChannel("data", (sender, type, data, target) => {
  usersMap[sender].el.setAttribute("color", "blue");
})

您可以在 this glitch 中看到它正在运行。如果任何用户按下“打扰一下”，其余用户应该会在他的头顶看到一个感叹号。

如果您以另一种方式广播数据（如另一个 socket.io 连接），您可以在消息中传递您自己的 clientID (player.getAttribute("networked").creator)，因此以上内容保持不变一样的，

或你可以传递networkId，所以接收者可以做一个单一的查询：

 let senderEntity = document.getElementById("naf-" + networkId)

a-frame networked - 如何将头像与广播客户端匹配？

a-frame networked - how to match an avatar with a broadcasting client?

aframe

aframe-networked