Colab

Easily turn your app multiplayer with cyxth colab.

tsimport Cyxth from '@cyxth/core';
import Colab from '@cyxth/colab';

const APP_URL = "my-app.cyxth.com"; // appid
const TOKEN = "ey....."; // authorized user token

const cyxth = await new Cyxth(APP_ID, [Colab]).connect(TOKEN);
const colab = await cyxth.colab("https://cdn.cyxth.com/colab@0.0.1.wasm");

const stateId ="tasks-uxi"; // state id
await colab.createOrJoin(stateId); // create or join state

const tree = colab.changeContext().tree();
tree.setDefaultHandler((change,userId) => {
 // ...handle change
})

const state: {tasks: Task[]} = tree.state;

const createTask = (task: Task) => {
 state.tasks.push(task);
}

const markDone = (index: number, done: boolean) => {
 state.tasks[index].done = done;
}

// ....

index

Properties

offline

offline status

tsboolean

stateId ?

state id

tsstring

wasmUrl ?

colab wasm url

tsstring

Methods

addUsers

tsaddUsers (users: string[]) : Promise<Status> ;

add users to colab state, users will get newcolab notification to join if they are online

emits user:add event

Parameters

users

an array of user ids

tsstring[]
Returns
tsPromise<Status>

changeContext

tschangeContext () : Context ;
Returns
tsContext

configure

tsconfigure (config: ColabConfig) : Promise<Status> ;

update colab configuration

Parameters

config

new configuration emits cnl:config event

tsColabConfig
Returns
tsPromise<Status>

create

tscreate (stateId: string, config?: ColabConfig) : Promise<Status> ;

create a new colab state

fails if state exists at stateId or user has no permissions to create state.

Parameters

stateId

state id

tsstring
config ?

state configuration

tsColabConfig
Returns
tsPromise<Status>

createOrJoin

tscreateOrJoin (stateId: string, config?: ColabConfig) : Promise<Status> ;

create a state or join if it exists

Parameters

stateId
tsstring
config ?
tsColabConfig
Returns
tsPromise<Status>

delUsers

tsdelUsers (users: string[]) : Promise<Status> ;

remove user from state

users removed won't be able to join again unless added

emits user:del event

Parameters

users

an array of user ids

tsstring[]
Returns
tsPromise<Status>

delete

tsdelete (reason?: string) : Promise<any> ;

delete a colab state disconnecting all active users, only the owner (one who started it) can do this

Parameters

reason ?

optionally tell others the reason

tsstring
Returns
tsPromise<any>

getUsers

tsgetUsers () : Promise<User[]> ;

get active colab state users

Returns

active users connected to state

tsPromise<User[]>

join

tsjoin (stateId: string) : Promise<Status> ;

join an existing colab state

emits user:join event

Parameters

stateId

state id

tsstring
Returns
tsPromise<Status>

leave

tsleave () : Promise<Status> ;

leave a colab state,

emits user:left event

Returns
tsPromise<Status>

load

tsload (stateId: string) : Promise<Status> ;

load a collaboration instance

user must have started or joined the collaboration instance earlier for this to work will fail if user is blocked or state with id does not exist

Parameters

stateId

state id

tsstring
Returns
tsPromise<Status>

modUsers

tsmodUsers (users: User[]) : Promise<Status> ;

moderate users in state deciding who has edit, view, no-access permissions

emits user:mod event

check concepts for more about permissions

Parameters

users

an array of users

tsUser[]
Returns
tsPromise<Status>

on

tson < K extends keyof ColabEventMap > (event: K, handler:  (ev: ColabEventMap[K]) => any ) : void ;

listen for colab events

tscolab.on("user:join",(user) => {
    //... update list
})

Parameters

event

event

tsK
handler

event handler function

ts (ev: ColabEventMap[K]) : any ;
Returns
tsvoid

presence

tspresence (data: any) : void ;

send presence data to all connected users i.e text selections and cursor positions to enhance the collaboration experience by conveying user intent

other users can listen using on presence event

tscolab.on('presence', (data) => {
		// ... convey user intent
})

Parameters

data

and presense data

tsany
Returns
tsvoid

toggleOffline

tstoggleOffline () : Promise<void> ;

toggle offline status.

cyxth will automatically set offline status when a user goes offline or when the connection is too slow listen for user:offline event in cyxth core or colab

Returns
tsPromise<void>