Zero Dependency

tab-sync Demo

브라우저 탭 간 실시간 상태 동기화, 리더 선출, Cross-Tab RPC를 직접 체험해보세요

연결됨 · 1개 탭

ID: — · Follower

BroadcastChannel

👥 탭 프레즌스

현재 열려 있는 모든 탭의 실시간 상태

// 탭 목록 가져오기
const tabs = sync.getTabs();
// → [{ id, createdAt, isLeader, isActive, url }, ...]

// 탭 변화 감지
sync.onTabChange((tabs) => {
  console.log(`열린 탭: ${tabs.length}개`);
});

// 현재 탭 수
sync.getTabCount(); // 3
      

🔄 상태 동기화

다른 탭에서 값을 변경하면 여기에 실시간 반영됩니다

🎨 테마

🔢 카운터

🎯 공유 색상

#6366f1

💬 공유 메시지

const sync = createTabSync({
  initial: {
    theme: 'light',
    count: 0,
    color: '#6366f1',
    message: '',
  },
});

// 값 읽기 & 쓰기
sync.get('count');           // 0
sync.set('count', 42);       // → 모든 탭에 전파

// 특정 키 구독
sync.on('count', (value, meta) => {
  console.log(value, meta.isLocal ? 'local' : 'remote');
});

// 여러 키 한번에 변경
sync.patch({ theme: 'dark', count: 0 });
      

👑 리더 선출

자동 리더 선출 · 리더 탭을 닫으면 새 리더가 즉시 선출됩니다

현재 리더

—

이 탭의 역할

—

리더 선출 횟수

// 리더 여부 확인
sync.isLeader();  // true | false

// 리더 정보 가져오기
sync.getLeader(); // { id, createdAt, isLeader, ... }

// 리더가 되었을 때 콜백 (클린업 함수 반환 가능)
sync.onLeader(() => {
  console.log('이 탭이 리더가 되었습니다!');
  return () => console.log('리더 역할 해제');
});
      

📡 Cross-Tab RPC

다른 탭의 함수를 원격 호출하고 결과를 받습니다

Follower 탭에서 버튼을 눌러 리더 탭에 RPC를 보내보세요. 2개 이상의 탭이 필요합니다.

// 핸들러 등록 (모든 탭에서)
sync.handle('getTime', () => {
  return { time: new Date().toISOString() };
});

// 리더 탭에게 RPC 호출
const result = await sync.call('leader', 'getTime');
console.log(result.time);

// 특정 탭에게 RPC 호출
const pong = await sync.call(targetTabId, 'ping');

// 타임아웃 설정 (기본 5초)
await sync.call('leader', 'heavyTask', args, 10000);
      

📋 이벤트 로그

탭 간 발생하는 모든 이벤트를 실시간 추적

이벤트가 여기에 표시됩니다

🎯 킬러 데모

tab-bridge의 다양한 활용 사례를 직접 체험해보세요