javascript / expert
Snippet
Kontextübergreifende Kommunikation mit BroadcastChannel
BroadcastChannel bietet einen einfachen Pub/Sub-Mechanismus für die Kommunikation zwischen verschiedenen Browser-Kontexten (Tabs, Fenster oder Iframes) derselben Origin. Er ist ideal zum Synchronisieren von Status wie Authentifizierung oder Theme-Wechseln.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const authChannel = new BroadcastChannel('auth_sync');// When user logs out in one tabfunction logout() {authChannel.postMessage({ action: 'logout', timestamp: Date.now() });window.location.reload();}// Listening in all other tabs/windowsauthChannel.onmessage = (event) => {if (event.data.action === 'logout') {console.log('Session ended elsewhere. Redirecting...');window.location.href = '/login';}};
nextjs
Erklärung
1
new BroadcastChannel('auth_sync');
Erstellt oder tritt einem Kommunikationskanal mit einem eindeutigen Namen über dieselbe Origin bei.
2
authChannel.postMessage(...);
Sendet ein Nachrichtenobjekt an alle anderen aktiven Instanzen dieses Kanals.
3
authChannel.onmessage = (event) => { ... };
Event-Handler, der in jedem Tab ausgelöst wird, außer in dem, der die Nachricht gesendet hat.