Example Host

In this example a host node is used to handle game logic, physics, and network updates. It is the authority for the game state, and is responsible for broadcasting updates to the clients.

import EchoD from 'echo-d';

Prepare an events object to handle events such as actorInput.

import { events } from './events.js';

Include the listenToClients and broadcastClients methods from the transport layer.

import { listenToClients, broadcastClients } from './transport.js';

Echo-D Host Instance

Create a new Echo-D instance, and pass in the events along with options. The events will be used to handle events such as actorInput.

In this example we are using f32 for position components, and compressing strings as integers. We are also setting isAuthority to true, and isSymbolLeader to true. compressStringsAsInts is enabled to reduce the size of messages.

The updateOptions are used to specify which updates to send to the clients. In this example we are only sending position updates and inputs are masked from the host becayse they are only allowed from clients.

const echoOptions =  {
    compressStringsAsInts: true,
    isAuthority: true,
    isSymbolLeader: true,
    types: { position: [ 'f32', 3 ] },
    responder: broadcastClients,
    updateOptions: {
        mask: { inputs: true },
        validkeys: { position: true }
    }
};
const echoD = new EchoD( { events }, echoOptions );

Listen to Clients

Import the listenToClients and broadcastClients methods from the transport layer. Listen to clients and handle incoming messages with Echo-D.

listenToClients( echoD );

Game Loop

Use Echo-D to perform a game network update by broadcasting updates to the clients.

function gameNetworkUpdate ( ) {
    echoD.updater( );
}

Create a game loop function to handle game logic, physics, and network updates.

function gameLoop ( ) {
    // gamePhysicsOrOther();
    gameNetworkUpdate( );
}

Setup the game loop using setInterval, or use a different game loop method.

let gameInterval = null;
export function gameStart ( ) {
    gameInterval = setInterval( gameLoop, 1000 / 30 );
}
export function gameStop ( ) { clearInterval( gameInterval ); }

gameStart( );

Actor Input Handler

Add an event listener for actorInput events. This will be used to handle actor inputs. In this example inputs are used to move the position of actors.

events.on('actorInput', ( id, input, index, tick ) => {
    const position = echoD.store.findComponent( id, 'position' ) || [ 0, 0, 0 ];
    echoD.upsertComponent( id, 'position', new Float32Array( [
        position[ 0 ] + ( input.x || 0 ),
        position[ 1 ] + ( input.y || 0 ),
        position[ 2 ] + ( input.z || 0 ),
    ] ) );
} );

Host Transport Layer

Choose a network transport layer such as BroadcastChannel, WebSocket, or WebRTC.

BroadcasChannel
WebSocket

Create a BroadcastChannel instance for broadcasting to game clients.

const bcGameClients = new BroadcastChannel( 'game-clients' );
const bcGameHost = new BroadcastChannel( 'game-host' );

Now setup a message handler for the bcGameHost. This example only supports one host and multiple clients. Handle messages by passing them to the Echo-D instance.

export function listenToClients ( echoD ) {
    bcGameHost.onmessage = ( { data } ) => echoD.many( data );
}

Implement a broadcastClients method to broadcast a message to the clients.

export function broadcastClients ( message ) {
    bcGameClients.postMessage( message );
}

Or use WebSocketServer from a WebSocket library such as ws in a supported JavaScript environments such as Node.js.

msgpack is also recommended for reducing the size of messages. Especially when transporting over the network.

import { WebSocketServer } from 'ws';
import { decode, encode } from 'msgpack';

Keep a list of clients that will be used to broadcast updates.

const clients = [ ];

Handle messages from clients by decoding them, and passing them to the Echo-D instance.

function messageHandler ( data ) {
    data = decode( data );
    echoD.many( data );
};

After a client disconnects, remove them from the list of clients.

function closeHandler ( conn ) {
    const index = clients.indexOf( conn );
    if (index !== -1) { clients.splice( index, 1 ); }
}

Create a WebSocketServer instance, and handle websocket connections, add them to the list of clients, and send an init message to the client. When a message is received, pass it to the message handler.

export function listenToClients( echoD, wss ) {
    wss = wss || createWebSocketServer( { port: 8080, host: 'localhost' } );
    wss.on( 'connection', ( conn ) => {
        clients.push( conn );
        conn.on( 'close', () => closeHandler( conn ) );
        conn.on( 'message',  ( data ) => messageHandler( echoD, data ) );
        conn.send( encode( [ 'init' ] ) );
    });
}

Implement a broadcastClients method to broadcast a message to the WebSocket clients. Use msgpack to encode the message before sending it.

export function broadcastClients ( message ) {
    const data = encode( message );
    clients.forEach( ( client ) => client.send( data ) );
}

Default Client Transport

Provide a way to import the broadcastClients method from ./host/transport.js.

BroadcastChannel
WebSocket

Set the default transport to BroadcastChannel.

export * from './transport/bc.js';

Set the default transport to WebSocket.

export * from './transport/ws.js';