Simple Counter
In this tutorial, we’ll implement a basic counter example to illustrate how to set up subjects, deliveries, and real-time state updates using BigState.
Please note!
That in this demo example, the code for publishing the state (statePublication) and the code for receiving (subscribing) to the state (getStates) are located in the same file and executed in the same environment. However, this is done solely for the purpose of simplifying and illustrating the concepts of BigState. The key goal of BigState is to provide distributed state management. In practice: One or more services (e.g., your backend, a microservice, or an IoT device) will publish (stateSet) the current state (the publisher role). Many other clients (e.g., frontend applications, mobile clients, or other backend services) will receive and subscribe (subscribeStateUpdate) to these state updates (the subscriber role). BigState acts as a central broker that effectively connects publishers and subscribers, ensuring real-time data delivery regardless of the physical location of these components.
Local Setup#
This example requires a locally running BigState environment. Please start it before continuing.
Authentication#
Create client#
const client = new Bs.BigStateHttpClient({
baseUrl: 'https://api.bigstate.io',
apiKey: '3/ig10oZF/1f3kBn7VR0QSgZU0rtWR2oDsQ6WwoYwmT6hwQ9hCdYxy7NVIscs/hWCOTsUQeUnEbo4HjvlR/Gw/FeSfN++TsJX070aLpiu4Paj/ihByWFgp5QsFjEL8Cs@1',
});
const clientWs = new Bs.BigStateWsDeliveryClient({
baseUrl: 'https://ws.delivery.bigstate.io',
apiKey: '3/ig10oZF/1f3kBn7VR0QSgZU0rtWR2oDsQ6WwoYwmT6hwQ9hCdYxy7NVIscs/hWCOTsUQeUnEbo4HjvlR/Gw/FeSfN++TsJX070aLpiu4Paj/ihByWFgp5QsFjEL8Cs@1',
});
const DELIVERY_WS = 'deliveryWsCounter';
const COUNTER_SID = 'simple:counter';
Create subject#
Creating a Subject (simple:counter) that defines the data structure.
const createSubject = async () => {
const subject = {
name: 'Small counter',
desc: 'Online small counter',
example: { count: 1 },
type: 2,
};
const { error } = await client.subjectCreate(subject, COUNTER_SID);
};
Create delivery#
Create a Delivery (deliveryWs) to route status updates via WebSocket.
const creatDelivery = async () => {
const delivery = {
deliveryId: DELIVERY_WS,
name: 'Counter WS delivery',
sids: [COUNTER_SID],
type: 1,
};
const { error } = await client.deliveryCreate(delivery);
console.log(error);
};
Publish state#
Cyclic updating and publishing of the current counter value.
const statePublication = async () => {
let count = 0;
setInterval(async () => {
count = count === 1000000000000 ? 0 : count + 1;
const data = {
at: new Date().toISOString(),
value: { count },
};
const { error } = await client.stateSet(COUNTER_SID, data);
if (error) {
console.error('Error set state:', error);
} else {
console.log(`new ${COUNTER_SID} state: `, data.value);
}
}, 100);
};
Read state#
Subscribing to status updates via WebSocket and displaying them in the frontend.
const getStates = () => {
const counterDiv = document.querySelector('#counter');
clientWs.subscribeStateUpdate([DELIVERY_WS], (message) => {
counterDiv.innerText = message?.value?.count ?? '';
});
};
Start#
const start = async () => {
await createSubject();
await creatDelivery();
await statePublication();
getStates();
};
start();