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
- TypeScript
realTime.subscribe('realtime-component.state-changed', onRealTimeEngineStateChanged);
function onRealTimeEngineStateChanged(state) {
// do something
}
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