Global

Members

# (constant) Constants

User-defined Constants

To ensure that all users in a session execute the exact same Model code, the session id is derived by hashing the source code of Model classes and value of constants. To hash your own constants, put them into Croquet.Constants object.

The constants can be used in both Model and View.

Note: the Constants object is recursively frozen once a session was started, to avoid accidental modification.

Example:

const Q = Croquet.Constants;
Q.ANSWER = 42;
Q.POWERLEVEL = 9000;

class MyModel extends Croquet.Model {
    init() {
         this.answer = Q.ANSWER;
         this.level = Q.POWERLEVEL;
    }
}

Events

# view-join

Published when a new user enters the session, or re-enters after being temporarily disconnected.

This is a model-only event, meaning views can not handle it directly.

Note: Each "view-join" event is guaranteed to be followed by a "view-exit" event when that user leaves the session, or when the session is resumed from a snapshot.

Hint: In the view, you can access the local viewId as this.viewId, and compare it to the argument in this event, e.g. to associate the view side with an avatar on the model side.

Properties

Name	Type	Description
`scope`	String	`this.sessionId`
`event`	String	`"view-join"`
`viewId`	String	the joining user's local viewId

Example

class MyModel extends Croquet.Model {
    init() {
        this.userData = {};
        this.subscribe(this.sessionId, "view-join", this.addUser);
        this.subscribe(this.sessionId, "view-exit", this.deleteUser);
    }
    addUser(viewId) {
        this.userData[viewId] = { start: this.now() };
        this.publish(this.sessionId, "user-added", viewId);
    }
    deleteUser(viewId) {
        const time = this.now() - this.userData[viewId].start;
        delete this.userData[viewId];
        this.publish(this.sessionId, "user-deleted", {viewId, time});
    }
}
MyModel.register("MyModel");
class MyView extends Croquet.View {
    constructor(model) {
        super(model);
        for (const viewId of Object.keys(model.userData)) this.userAdded(viewId);
        this.subscribe(this.sessionId, "user-added", this.userAdded);
        this.subscribe(this.sessionId, "user-deleted", this.userDeleted);
    }
    userAdded(viewId) {
        console.log(`${ this.viewId === viewId ? "local" : "remote"} user ${viewId} came in`);
    }
    userDeleted({viewId, time}) {
        console.log(`${ this.viewId === viewId ? "local" : "remote"} user ${viewId} left after ${time / 1000} seconds`);
    }
}

# view-exit

Published when a user leaves the session, or is disconnected.

This is a model-only event, meaning views can not handle it directly.

This event will be published when a view tab is closed, or is disconnected due to network interruption or inactivity. A view is deemed to be inactive if 10 seconds pass without an execution of the Croquet main loop; this will happen if, for example, the browser tab is hidden. As soon as the tab becomes active again the main loop resumes, and the session will reconnect, causing a "view-join" event to be published. The viewId will be the same as before.

Note: when starting a new session from a snapshot, "view-exit" events will be generated for all of the previous users before the first "view-join" event of the new session.

Example

See "view-join" event

Properties

Name	Type	Description
`scope`	String	`this.sessionId`
`event`	String	`"view-exit"`
`viewId`	String	the user's id

# synced

Published when the session backlog crosses a threshold. (see View#externalNow for backlog)

This is a non-synchronized view-only event.

If this is the main session, it also indicates that the scene was revealed (if data is true) or hidden behind the overlay (if data is false).

this.subscribe(this.viewId, "synced", this.handleSynced);

The default loading overlay is a CSS-only animation. You can either customize the appearance, or disable it completely and show your own in response to the "synced" event.

Customizing the default loading animation

The overlay is structured as

<div id="croquet_spinnerOverlay">
    <div id="croquet_loader"></div>
</div>

so you can customize the appearance via CSS using

#croquet_spinnerOverlay { ... }
#croquet_loader:before { ... }
#croquet_loader { ... }
#croquet_loader:after { ... }

where the overlay is the black background and the loader with its :before and :after elements is the three animating dots.

The overlay <div> is added to the document’s <body> by default. You can specify a different parent element by its id string or DOM element:

Croquet.App.root = element;   // DOM element or id string

Replacing the default overlay

To disable the overlay completely set the App root to false.

Croquet.App.root = false;

To show your own overlay, handle the "synced" event.

Properties

Name	Type	Description
`scope`	String	`this.viewId`
`event`	String	`"synced"`
`data`	Boolean	`true` if in sync, `false` if backlogged