Live State Sync
Overview
import { useVeltClient, useEffect } from '@veltdev/react';
export default function YourDocument() {
const { client } = useVeltClient();
useEffect(()=>{
if(client){
const liveStateDataId = "uniqueId";
const liveStateData = { "key": "value" }; // any type of data
const liveStateSyncElement = client.getLiveStateSyncElement();
//Set Live State Data
liveStateSyncElement.setLiveStateData(liveStateDataId, liveStateData);
//Subscribe to Live State Data
liveStateSyncElement.getLiveStateData(liveStateDataId).subscribe((data) => {
// your logic here...
});
}
})
return (
<div>
...
</div>
);
}
These Features are currently in beta and may be subject to change.
React / Next.js
HTML
Live State Sync
With Live State Sync, you can create a shared data object that persists and syncs across all clients live on a given document.
1
Set or Update a shared live data object
Sets or updates a custom shared data object that will be synced across all clients live on the current document. Pass in a unique ID and the data object you want to sync. If the object already exists with that ID, then it will be updated.
Input params:
-
liveStateDataId:string; -
liveStateData:any;
const liveStateDataId = 'uniqueId';
const liveStateData = { 'key': 'value' }; // any type of data
const liveStateSyncElement = client.getLiveStateSyncElement();
liveStateSyncElement.setLiveStateData(liveStateDataId, liveStateData);
2
Get a shared live data object
Subscribes to an existing shared live data object. Pass in the unique ID that you had used to set the data.
Input params:
liveStateDataId:string; (optional)
const liveStateDataId = 'uniqueId';
const liveStateSyncElement = client.getLiveStateSyncElement();
liveStateSyncElement.getLiveStateData(liveStateDataId).subscribe((data) => {
// your logic here...
});
import { useVeltClient, useEffect } from '@veltdev/react';
export default function YourDocument() {
const { client } = useVeltClient();
useEffect(()=>{
if(client){
const liveStateDataId = "uniqueId";
const liveStateData = { "key": "value" }; // any type of data
const liveStateSyncElement = client.getLiveStateSyncElement();
//Set Live State Data
liveStateSyncElement.setLiveStateData(liveStateDataId, liveStateData);
//Subscribe to Live State Data
liveStateSyncElement.getLiveStateData(liveStateDataId).subscribe((data) => {
// your logic here...
});
}
})
return (
<div>
...
</div>
);
}