@casual-simulation/aux-vm-browser NPM

AUX VM Browser

A set of utilities required to run an AUX in a web browser.

Installation

Install the NPM package

npm install @casual-simulation/aux-vm-browser

Add the WorkerEntry.js file to your Webpack config:

entry: {
    vm: path.resolve(
        __dirname,
        'node_modules',
        '@casual-simulation',
        'aux-vm-browser',
        'html',
        'WorkerEntry.js'
    ),
},

Add the iframe_host.html file to your webpack config via the HtmlWebpackPlugin:

new HtmlWebpackPlugin({
    chunks: ['vm'],
    template: path.resolve(
        __dirname,
        'node_modules',
        '@casual-simulation',
        'aux-vm-browser',
        'html',
        'iframe_host.html'
    ),
    title: 'AUX VM',
    filename: 'aux-vm-iframe.html',
}),

Ensure that aux-vm-iframe.html is available at the root path of the site.

Usage

import { BotManager, AuxVMImpl } from '@casual-simulation/aux-vm-browser';
import { AuxUser } from '@casual-simulation/aux-vm';

start();

async function start() {
    // The user that we want the program to act as.
    // In a real-world scenario we would not hardcode these values
    // and we would store the token in a secure location.
    const user: AuxUser = {
        id: 'myUserId', // The Unique ID of this user session.
        username: 'myUsername', // The unique username of the user.
        name: 'myName', // The common name of the user.
        token: 'mySecretToken', // The user password.
        isGuest: false, // Whether the user should be treated as a guest.
    };

    // The ID of the channel that should be loaded.
    // The ID can have the following forms:
    // - 'channelId' - This will load 'channelId' from the current host (taken from navigator).
    // - 'https://example.com/*/channelId' - This will load 'channelId' from example.com over https
    const id = 'channelId';

    const config = {
        isBuilder: false,
        isPlayer: false,
    };

    const partitions = BotManager.createPartitions(id, user, config);

    // Create a file manager.
    // This represents an in-browser AUX simulation.
    const sim = new BotManager(
        user,
        id,
        config,
        new AuxVMImpl(user, {
            config,
            partitions,
        })
    );

    // Initialize the simulation.
    // This will setup a web worker and pipe
    // events between the worker and main thread.
    await sim.init();

    // Listen for the sync state to change to "synced".
    // When we're synced we know we have the most up to date data
    // and we can communicate our changes to the server.
    // Note that this will not fire if we are not allowed to connect.
    // This may happen if we are not authenticated/authorized.
    sim.connection.syncStateChanged.subscribe((synced) => {
        if (synced) {
            console.log("We're synced!");

            // TODO: Update THE UI
        } else {
            console.log('No longer synced.');

            // TODO: Update the UI
        }
    });
}

8 months ago

8 months ago

8 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

10 months ago

10 months ago

11 months ago

11 months ago

10 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

12 months ago

11 months ago

11 months ago

12 months ago

11 months ago

AUX VM Browser

Installation

Usage

Connect to an AUX