a-frame 联网 - 如何将头像与广播客户端匹配? [英] a-frame networked - how to match an avatar with a broadcasting client?

问题描述

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

I'm using aframe-networked, and I'm sending some custom data between the users:

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

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

but I'm having trouble determining which avatar entity is corresponding to the broadcasting client. How the receivers know which player is the sender from the callback?

推荐答案

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

One way would be by using aframe-networked events, and keeping all connected users in a dictionary. The creatorID, ownerId and networkId are all kept in the networked component - so all You need is to grab them once the avatar is created:

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))时，您都可以轻松跟踪属于发送者的实体:

Now, each time You get a callback from a broadcasted message (via NAF.connection.subscribeToDataChannel(dataType, callback)) You can easily track the entity belonging to the sender:

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

您可以在这个故障中看到它的运行情况.如果任何用户按对不起"，其他人应该会在他的头顶看到一个感叹号.

You can see it working in this glitch. If any user presses "excuse me" the rest should see an exclamation mark above his head.

如果你以另一种方式广播数据(比如另一个 socket.io 连接)，你可以传递你自己的 clientID (player.getAttribute("networked").creator) 在消息中，所以上面保持不变，

If You're broadcasting data in another way (like another socket.io connection), You can pass Your own clientID (player.getAttribute("networked").creator) in the message, so the above stays the same,

或者你可以传递networkId，这样接收者就可以做一个单一的查询:

or you can pass the networkId, so the receiver can do a single query:

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

这篇关于a-frame 联网 - 如何将头像与广播客户端匹配?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！