Estaba buscando una forma de comunicarme entre varias pestañas o ventanas en un navegador (en el mismo dominio, no en CORS).
Estoy usando el temporizador y debería funcionar en todas las páginas del sitio. Si hay una manera de detener/pausar/reproducir el temporizador en todas las páginas (nuevas ventanas) simultáneamente?
Por ejemplo, tengo 2 pestañas: página 1 y página 2... en ambas páginas tengo el mismo temporizador. Si hago clic en el temporizador de pausa en la página 1, también debe hacer una pausa en la página 2.
No puedo encontrar una solución en todo el día ... ayuda por favor.
Mi código de temporizador:
const Timer = easytimer.Timer; const getSavedTime = () => JSON.parse(localStorage.getItem('time')) || {}; const instance = new Timer({ startValues: getSavedTime() }); instance.addEventListener('secondsUpdated', () => { document.querySelector('.example').textContent = instance.getTimeValues().toString(); localStorage.setItem('time', JSON.stringify(instance.getTimeValues())); }); instance.addEventListener('started', () => localStorage.setItem('running', '1')); instance.addEventListener('paused', () => localStorage.removeItem('running')); instance.addEventListener('stopped', () => { localStorage.removeItem('time'); localStorage.removeItem('running'); document.querySelector('.saved').textContent = ''; document.querySelector('.example').textContent = ''; }); document.querySelector('.saved').textContent = localStorage.getItem('time'); document.querySelector('.example').textContent = instance.getTimeValues().toString(); document.querySelector('.start-button').addEventListener('click', () => instance.start({ startValues: getSavedTime() })); document.querySelector('.pause-button').addEventListener('click', () => instance.pause()); document.querySelector('.stop-button').addEventListener('click', () => instance.stop()); if (localStorage.getItem('running') === '1') { instance.start({ startValues: getSavedTime() }); }escuchar evento:
window.addEventListener('storage', function (e) { console.log("storage event occured here"); },false);Puede usar BroadcastChannel para comunicarse entre diferentes pestañas dentro del mismo origen.
La parte más difícil sería administrar qué pestaña "ejecuta" el código del temporizador y qué pestañas simplemente "escuchan" los eventos. Luego, si la pestaña que estaba ejecutando el temporizador se cerrara, ¿cómo se coordinaría para decidir qué otra pestaña debería asumir esa función?
Una mejor opción podría ser colocar el código del temporizador en un Web Worker (específicamente un SharedWorker ) y luego simplemente usar BroadcastChannel (y/o tal vez la propiedad del port de SharedWorker ) para enviar los eventos a las pestañas.
Si tiene suerte, es posible que pueda hacer que su clase easytimer.Timer se ejecute dentro de un Web Worker sin ninguna modificación, aunque aún tendrá que trabajar un poco para conectarlo a BroadcastChannel .