javascript / expert
Snippet
Tab-übergreifende Statussynchronisation mit BroadcastChannel
Die BroadcastChannel-API ermöglicht die Kommunikation zwischen verschiedenen Browser-Kontexten (Tabs, Fenster) derselben Herkunft. Die Integration mit Svelte-Runen stellt sicher, dass alle offenen Tabs sofort auf Statusänderungen reagieren.
snippet.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script>let status = $state('offline');const channel = new BroadcastChannel('app_sync');channel.onmessage = (event) => {status = event.data;};function updateStatus(newStatus) {status = newStatus;channel.postMessage(newStatus);}</script><p>Status: {status}</p><button onclick={() => updateStatus('online')}>Go Online</button>
svelte
Erklärung
1
const channel = new BroadcastChannel('app_sync');
Erstellt eine Kommunikationsleitung namens 'app_sync', die von allen Tabs geteilt wird.
2
channel.onmessage = (event) => { status = event.data; };
Aktualisiert den lokalen reaktiven Status, wenn eine Nachricht von einem anderen Tab empfangen wird.
3
channel.postMessage(newStatus);
Überträgt den neuen Status an alle anderen Instanzen der Anwendung.