Realtime API Reference

The Real-time is main part of the SuperViz platform, it allows you to synchronize states between participants utilizing channels. This enables various functionalities such as real-time data sharing, and event-driven communication for seamless collaborative experiences.

Usage

To use the Real-time on your application, use the following code:

import { Realtime } from '@superviz/realtime';

const realtime = new Realtime('DEVELOPER_KEY', {
  participant: {
    id: 'PARTICIPANT_ID',
  },
});

After initializing it, you can use the connect method to connect to a specific event channel.

Methods

connect()

The connect async method allows you to connect to a specific event channel. If the channel does not exist, it will be created.

const channel = await realtime.connect('channel-name');

destroy()

The destroy method allows you to disconnect from the Real-time service and all channels that were connected in the instance.

realtime.destroy();

subscribe()

The subscribe method allows you to listen to the Real-time's component events. It receives the event name and a callback function that will be called when the event is dispatched.

The name of the event is one of the values from the RealtimeComponentEvent enum.

realTime.subscribe('realtime-component.state-changed', onCallbackFunction);

function onCallbackFunction(state) {
    // do something
}

unsubscribe()

The unsubscribe method allows you to stop listening to the Real-time's component events. The name of the event is one of the values from the RealtimeComponentEvent enum.

realTime.unsubscribe('realtime-component.state-changed', onCallbackFunction);

function onCallbackFunction(state) {
    // do something
}

Events

The Real-time emits one event that allows you to monitor and respond to its state changes.

REALTIME_STATE_CHANGED

The REALTIME_STATE_CHANGED is dispatched when there is a change under the current state of the Real-time component.

Here is an implementation on how to catch the dispatched event:

JavaScript

realTime.subscribe('realtime-component.state-changed', onRealTimeEngineStateChanged);

function onRealTimeEngineStateChanged(state) {
  // do something
}

TypeScript

import { RealtimeComponentEvent } from '@superviz/realtime'

realTime.subscribe(RealtimeComponentEvent.REALTIME_STATE_CHANGED, onRealTimeEngineStateChanged);

function onRealTimeEngineStateChanged(state: RealtimeComponentState) {
  // do something
}

On the callback function, you will receive the following argument:

Type	Description
RealtimeComponentState	The Real-time component current state. It can be STARTED or STOPPED.

Types

RealtimeComponentState

Enum representing the state of the Real-time component.

Event	Value	Description
STARTED	'STARTED'	The realtime component has started.
STOPPED	'STOPPED'	The realtime component has stopped.

RealtimeComponentEvent

Enum of available realtime component events.

Event	Value	Description
REALTIME_STATE_CHANGED	'realtime-component.state-changed'	Triggered when the realtime component state changes.