Alright I'll focus first on the transfer logic for the entities data, I won't go in details on the signaling part in this post.
All the transferred data are the entities, mostly all is handled in the networked component, it uses the special u (update), um (update multiple) an r (remove) messages.

networked-aframe/src/NetworkConnection.js

Line 2 in 3299622

var ReservedDataType = { Update: 'u', UpdateMulti: 'um', Remove: 'r' };

When you connect, each networked component will take care of sending the entity to all participants if you're the owner of the entity. When you create an entity, at first you're the creator and owner of it, creator won't change, owner can change during the lifetime of the entity.
Here when I say 'sending the entity' I mean a json containing the full data or a subset of the data of the components of the networked entity, potentially components of its children, based on the networked schema associated with the networked entity.

networked-aframe/src/components/networked.js

Line 277 in 3299622

this.syncAll(undefined, true);

is called via the onConnected callback registered for the the connected event that is triggered here

networked-aframe/src/NetworkConnection.js

Lines 70 to 76 in 3299622

    
           connectSuccess(clientId) { 
        
             NAF.log.write('Networked-Aframe Client ID:', clientId); 
        
             NAF.clientId = clientId; 
        
             var evt = new CustomEvent('connected', {'detail': { clientId: clientId }}); 
        
             document.body.dispatchEvent(evt); 
        
           }

This call syncAll(undefined, true) meaning send to all participants the owned entities and with data marked with isFirstSync: true, will call

networked-aframe/src/components/networked.js

Line 342 in 3299622

NAF.connection.broadcastDataGuaranteed('u', syncData);

When a user join, all the participants are notified, if those other participants own some entities, they will send their owned entities to the joined user with

networked-aframe/src/components/networked.js

Line 340 in 3299622

NAF.connection.sendDataGuaranteed(targetClientId, 'u', syncData);

This is actually when the user opens a connection to the new user that we do the firstSync to this user only

networked-aframe/src/NetworkConnection.js

Lines 130 to 137 in 3299622

    
           dataChannelOpen(clientId) { 
        
             NAF.log.write('Opened data channel from ' + clientId); 
        
             this.activeDataChannels[clientId] = true; 
        
             this.entities.completeSync(clientId, true); 
        
             var evt = new CustomEvent('clientConnected', {detail: {clientId: clientId}}); 
        
             document.body.dispatchEvent(evt); 
        
           }

that calls

networked-aframe/src/NetworkEntities.js

Lines 141 to 147 in 3299622

    
           completeSync(targetClientId, isFirstSync) { 
        
             for (var id in this.entities) { 
        
               if (this.entities[id]) { 
        
                 this.entities[id].components.networked.syncAll(targetClientId, isFirstSync); 
        
               } 
        
             } 
        
           }

Later, if you take ownership of an entity (with the takeOwnership api), it calls syncAll() to broadcast to all participants the change, it will use

networked-aframe/src/components/networked.js

Line 342 in 3299622

NAF.connection.broadcastDataGuaranteed('u', syncData);

but this time with isFirstSync: falseon the data.

When an entity is removed by the owner, it broadcasts a remove message to all participants:

networked-aframe/src/components/networked.js

Line 581 in 3299622

NAF.connection.broadcastDataGuaranteed('r', syncData);

All the above use the reliable transport. Depending of the adapter it can be the websocket or a WebRTC datachannel configured with { ordered: true }

When you do some changes to a owned entity (like position and rotation or other components defined in the networked schema), it uses

networked-aframe/src/components/networked.js

Line 104 in 3299622

NAF.connection.broadcastData('um', data);

to broadcast to all participants using the unreliable transport, see no Guaranteed in the name of this api.
Depending of the adapter it can be websocket or WebRTC datachannel configured with { ordered: false, maxRetransmits: 0 }.
The data are sent 15 times per sec (NAF.options.updateRate=15) so every 66ms if something changed.

networked-aframe/src/components/networked.js

Line 112 in 3299622

this.nextSyncTime = this.el.clock.elapsedTime + 1 / NAF.options.updateRate;

When you receive a notification that a user disconnected, all non persistent entities he created even if owned by someone else are removed. If there are persistent entities that the user created, each participant will try to get ownership of those persistent entities.
This is this part in the code:

networked-aframe/src/NetworkConnection.js

Lines 139 to 146 in 3299622

    
           dataChannelClosed(clientId) { 
        
             NAF.log.write('Closed data channel from ' + clientId); 
        
             this.activeDataChannels[clientId] = false; 
        
             this.entities.removeEntitiesOfClient(clientId); 
        
             var evt = new CustomEvent('clientDisconnected', {detail: {clientId: clientId}}); 
        
             document.body.dispatchEvent(evt); 
        
           }

that calls

networked-aframe/src/NetworkEntities.js

Lines 155 to 172 in 3299622

    
           removeEntitiesOfClient(clientId) { 
        
             const removedEntities = []; 
        
             for (var id in this.entities) { 
        
               const entity = this.entities[id] 
        
               const creator = NAF.utils.getCreator(entity); 
        
               const owner = NAF.utils.getNetworkOwner(entity); 
        
               if (creator === clientId || (!creator && owner === clientId)) { 
        
                 const component = this.entities[id].getAttribute("networked") 
        
                 if (component && component.persistent) { 
        
                   // everyone will attempt to take ownership, someone will win, it does not particularly matter who 
        
                   NAF.utils.takeOwnership(entity); 
        
                 } else { 
        
                   removedEntities.push(this.removeEntity(id)); 
        
                 } 
        
               } 
        
             } 
        
             return removedEntities; 
        
           }

The last participant that took ownership wins.

networked-aframe/src/components/networked.js

Lines 467 to 472 in 3299622

    
           networkUpdate: function(entityData) { 
        
             // Avoid updating components if the entity data received did not come from the current owner. 
        
             if (entityData.lastOwnerTime < this.lastOwnerTime || 
        
                   (this.lastOwnerTime === entityData.lastOwnerTime && this.data.owner > entityData.owner)) { 
        
               return; 
        
             }

Feel free to contribute a diagram from the above explanation. :) You can start one with https://excalidraw.com and share it here if you want.

	connectSuccess(clientId) {
	NAF.log.write('Networked-Aframe Client ID:', clientId);
	NAF.clientId = clientId;

	var evt = new CustomEvent('connected', {'detail': { clientId: clientId }});
	document.body.dispatchEvent(evt);
	}

	dataChannelOpen(clientId) {
	NAF.log.write('Opened data channel from ' + clientId);
	this.activeDataChannels[clientId] = true;
	this.entities.completeSync(clientId, true);

	var evt = new CustomEvent('clientConnected', {detail: {clientId: clientId}});
	document.body.dispatchEvent(evt);
	}

	completeSync(targetClientId, isFirstSync) {
	for (var id in this.entities) {
	if (this.entities[id]) {
	this.entities[id].components.networked.syncAll(targetClientId, isFirstSync);
	}
	}
	}

	dataChannelClosed(clientId) {
	NAF.log.write('Closed data channel from ' + clientId);
	this.activeDataChannels[clientId] = false;
	this.entities.removeEntitiesOfClient(clientId);

	var evt = new CustomEvent('clientDisconnected', {detail: {clientId: clientId}});
	document.body.dispatchEvent(evt);
	}

	removeEntitiesOfClient(clientId) {
	const removedEntities = [];
	for (var id in this.entities) {
	const entity = this.entities[id]
	const creator = NAF.utils.getCreator(entity);
	const owner = NAF.utils.getNetworkOwner(entity);
	if (creator === clientId \|\| (!creator && owner === clientId)) {
	const component = this.entities[id].getAttribute("networked")
	if (component && component.persistent) {
	// everyone will attempt to take ownership, someone will win, it does not particularly matter who
	NAF.utils.takeOwnership(entity);
	} else {
	removedEntities.push(this.removeEntity(id));
	}
	}
	}
	return removedEntities;
	}

	networkUpdate: function(entityData) {
	// Avoid updating components if the entity data received did not come from the current owner.
	if (entityData.lastOwnerTime < this.lastOwnerTime \|\|
	(this.lastOwnerTime === entityData.lastOwnerTime && this.data.owner > entityData.owner)) {
	return;
	}

Uh oh!

Write a "how it works" documentation #409

Description

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions