Storage and Broadcast

The RealtimeKit Stores API allows you to create multiple key-value pair realtime stores. Users can subscribe to changes in a store and receive real-time updates. Data is stored until a session is active.

WebMobile

ReactWeb ComponentsAngular

Create a Store

You can create a realtime store (changes are synced with other users):

Param	Type	Description	Required
name	string	Name of the store	true

To create a store:

TypeScript

const stores = useRealtimeKitSelector((m) => m.stores);
const store = stores.create('myStore');

TypeScript

const store = meeting.stores.create('myStore');

TypeScript

const store = meeting.stores.create('myStore');

Note

This method must be executed for every user.

Update a Store

You can add, update or delete entires in a store:

Param	Type	Description	Required
key	string	Unique identifier used to store/update a value in the store	Yes
value	StoreValue	Value that can be stored agains a key	Yes

TypeScript

type StoreValue = string | number | object | array;

TypeScript

const stores = useRealtimeKitSelector((m) => m.stores.stores);
const store = stores.get("myStore");

await store.set("user", { name: "John Doe" });

await store.update("user", { age: 34 }); // { name: 'John Doe', age: 34 }

await store.delete("user");

TypeScript

type StoreValue = string | number | object | array;

TypeScript

const { stores } = meeting.stores;
const store = stores.get("myStore");

await store.set("user", { name: "John Doe" });

await store.update("user", { age: 34 }); // { name: 'John Doe', age: 34 }

await store.delete("user");

TypeScript

type StoreValue = string | number | object | array;

TypeScript

const { stores } = meeting.stores;
const store = stores.get("myStore");

await store.set("user", { name: "John Doe" });

await store.update("user", { age: 34 }); // { name: 'John Doe', age: 34 }

await store.delete("user");

Note

The set method overwrites the existing value, while the update method updates the existing value.

For example, if the stored value is ['a', 'b'] and you call update with ['c'], the final value will be ['a', 'b', 'c'].

Subscribe to a Store

You can attach event listeners on a store's key, which fire when the value changes.

TypeScript

const stores = useRealtimeKitSelector((m) => m.stores.stores);
const store = stores.get('myStore');
store.subscribe('key', (data) => {
    console.log(data);
});

// subscribe to all keys of a store
store.subscribe('\*', (data) => {
console.log(data);
});

store.unsubscribe('key');

TypeScript

const { stores } = meeting.stores;
const store = stores.get('myStore');
store.subscribe('key', (data) => {
    console.log(data);
});

// subscribe to all keys of a store
store.subscribe('\*', (data) => {
console.log(data);
});

store.unsubscribe('key');

TypeScript

const { stores } = meeting.stores;
const store = stores.get('myStore');
store.subscribe('key', (data) => {
    console.log(data);
});

// subscribe to all keys of a store
store.subscribe('\*', (data) => {
console.log(data);
});

store.unsubscribe('key');

Fetch Store Data

You can fetch the data stored in the store:

TypeScript

const stores = useRealtimeKitSelector((m) => m.stores.stores);
const store = stores.get('myStore');

// fetch value for a specific key
const data = store.get('key');

// fetch all the data in the store
const data = store.getAll();

TypeScript

const { stores } = meeting.stores;
const store = stores.get('myStore');

// fetch value for a specific key
const data = store.get('key');

// fetch all the data in the store
const data = store.getAll();

TypeScript

const { stores } = meeting.stores;
const store = stores.get('myStore');

// fetch value for a specific key
const data = store.get('key');

// fetch all the data in the store
const data = store.getAll();