@digilabscz/sync-hub-js

📡 SyncHub - Master/Slave Tab Synchronization for Browsers

SyncHub is a lightweight JavaScript library that enables master-slave synchronization between browser tabs using BroadcastChannel and localStorage. It prevents excessive server requests and ensures data consistency across tabs.

• ✅ Master tab handles data fetching
• ✅ Slave tabs stay passive and react to updates
• ✅ Automatic master re-election if the active tab changes
• ✅ Supports periodic data fetching or manual updates
• ✅ Designed for e-commerce carts, notifications, and any shared browser state

---

🚀 Installation

NPM

npm i @digilabscz/sync-hub-js

Then:

import SyncHub from '@digilabscz/sync-hub-js';
SyncHub.init();

or (CommonJS)

const SyncHub = require('@digilabscz/sync-hub-js');
SyncHub.init();

CDN

<script src="https://unpkg.com/@digilabscz/sync-hub-js@latest/dist/sync-hub.min.js"></script>

or

<script src="https://cdn.jsdelivr.net/npm/@digilabscz/sync-hub-js@latest/dist/sync-hub.min.js"></script>

The library will automatically call init() method and register as window.SyncHub.

---

Examples

🔄 Example 1 - Static Data Synchronization

<div id="notifications-badge" style="padding:10px; background:orange;"></div>

<script>
    // Initialize task for static data
    let task = window.SyncHub.registerTask('notifications-badge')
        .onUpdate((newState, prevState) => {
            renderNotificationBadge(newState, prevState);
        });

    // Manually update the task (can be triggered by button or event)
    task.update(5);

    function renderNotificationBadge(newState, prevState) {
        const node = document.querySelector('#notifications-badge');

        if (window.SyncHub.isMaster()) {
            node.classList.add('master');
        } else {
            node.classList.remove('master');
        }

        node.innerHTML = `<strong>${newState}</strong><sup>/${prevState !== undefined ? prevState : 0}</sup>`;
    }

    // Render initial state (if any)
    renderNotificationBadge(task.getState());
</script>

🌐 Example 2 - Auto Fetch from API (Notifications Badge)

<div id="notifications-badge" style="padding:10px; background:orange;"></div>

<script>
    // Create a task that fetches data every 5 seconds (only master tab runs fetch)
    let task = window.SyncHub.registerTask('notifications-badge')
        .onInterval(async (task) => {
            const response = await fetch('https://api.example.com/notifications-count', { cache: "no-store" });
            const count = await response.text();
            return parseInt(count);
        }, 5000, true) // true = run immediately
        .onUpdate((newState, prevState) => {
            renderNotificationBadge(newState, prevState);
        });

    function renderNotificationBadge(newState, prevState) {
        const node = document.querySelector('#notifications-badge');

        if (window.SyncHub.isMaster()) {
            node.classList.add('master');
        } else {
            node.classList.remove('master');
        }

        if (newState > 0) {
            node.classList.add('active');
        } else {
            node.classList.remove('active');
        }

        node.innerHTML = `<strong>${newState}</strong><sup>/${prevState !== undefined ? prevState : 0}</sup>`;
    }

    // Render initial state (if any)
    renderNotificationBadge(task.getState());
</script>

---

⚙️ API Summary

Method	Description
SyncHub.registerTask(taskName)	Register a new named task
task.onInterval(callback, intervalMs, runImmediately = false)	Define a periodic action the master tab should execute
task.onUpdate(callback)	React to data updates in all tabs
task.update(newData)	Manually trigger a new update
task.getState()	Get the last known state of the task
SyncHub.isMaster()	Check if the current tab is master

---