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

如何解决a-frame 联网 - 如何将头像与广播客户端匹配？

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

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

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

解决方法

一种方法是使用 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)