Real-time Data Engine

The Real-time Data Engine is a component of the SDK that allows you to synchronize states between participants in a room, by utilizing channels. This enables various functionalities such as real-time data sharing, and event-driven communication for seamless collaborative experiences.

Before we start

Before utilizing the Real-time Data Engine component, it is essential to initialize a room with a defined name and ID for the participant and the group.

Knowing Channels

A channel can be used to dispatch different types of messages or events in your application. The Real-time Data Engine component provides a connect method that allows you to add channels within the same room. To build something with real-time capabilities, you need to use channels. For more details, please visit the dedicated page on channels.

How to use

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

import { Realtime } from "@superviz/sdk";

const realtime = new Realtime();
const channel = await realtime.connect('YOUR_CHANNEL_NAME');

room.addComponent(realtime);

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("EVENT_NAME");

subscribe

The subscribe method allows you to listen to the Real-time Data Engine's events.

realTime.subscribe('event.name', onCallbackFunction);

function onCallbackFunction(state) {
    // do something
}

Event

The Real-time emits one event that allows you to monitor and respond to its changes within the room in real-time.

REALTIME_STATE_CHANGED

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

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

realTime.subscribe(RealtimeComponentEvent.REALTIME_STATE_CHANGED, onRealTimeEngineStateChanged);

function onRealTimeEngineStateChanged(state) {
	// do something
}

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

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

Types Definitions

RealtimeComponentState

Type: enum

The enumerable represents the Real-time Data Engine's current state. These are the possible values:

• STARTED
• STOPPED