javascript / expert
Snippet
Inter-Tab Status-Synchronisation mit BroadcastChannel
In Anwendungen mit mehreren Tabs ist die Synchronisierung des Status eine Herausforderung. Dieses Muster verwendet die BroadcastChannel-API innerhalb eines Vue Composables, um reaktive Änderungen an alle anderen Tabs desselben Ursprungs zu übertragen und so eine konsistente Benutzererfahrung zu gewährleisten.
snippet.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import { ref, watch, onUnmounted } from 'vue';export function useSharedState(key, initialValue) {const state = ref(initialValue);const channel = new BroadcastChannel(`sync_${key}`);channel.onmessage = (event) => {state.value = event.data;};watch(state, (newValue) => {channel.postMessage(JSON.parse(JSON.stringify(newValue)));}, { deep: true });onUnmounted(() => channel.close());return state;}
vue
Erklärung
1
const channel = new BroadcastChannel(`sync_${key}`);
Erstellt einen Kommunikationskanal speziell für den Status-Key.
2
channel.onmessage = (event) => { state.value = event.data; };
Hört auf Nachrichten von anderen Tabs und aktualisiert den lokalen reaktiven Status.
3
channel.postMessage(...);
Sendet den aktualisierten Status an andere Tabs, wann immer sich der lokale Status ändert.
4
onUnmounted(() => channel.close());
Schließt den Kanal ordnungsgemäß, um Speicherlecks und verwaiste Listener zu verhindern.