javascript / expert
Snippet
Tab-übergreifende Zustandssynchronisierung mit BroadcastChannel
Dieser Hook ermöglicht die Echtzeit-Synchronisierung des Zustands über mehrere Browser-Tabs derselben Herkunft hinweg, ohne Storage-Events zu verwenden. Er nutzt die BroadcastChannel-API für eine latenzarme Kommunikation.
snippet.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function useTabSync(key, initialState) {const [state, setState] = useState(initialState);const channel = useRef(new BroadcastChannel(`sync_${key}`));useEffect(() => {const bc = channel.current;bc.onmessage = (event) => {setState(event.data);};return () => bc.close();}, []);const setSyncedState = (newValue) => {setState(newValue);channel.current.postMessage(newValue);};return [state, setSyncedState];}
react
Erklärung
1
new BroadcastChannel(`sync_${key}`)
Initialisiert eine dedizierte Kommunikationsleitung für einen spezifischen State-Key.
2
bc.onmessage = (event) => { setState(event.data); }
Hört auf Aktualisierungen von anderen Tabs und aktualisiert den lokalen Zustand entsprechend.
3
channel.current.postMessage(newValue)
Überträgt den neuen Zustandswert an alle anderen aktiven Instanzen des Kanals.