Sobes.tech
Middle

Pe pagină există un player. Este nevoie să faci astfel încât, atunci când apeși stop pe o filă, redarea să se oprească și pe altă filă. Cum ai implementa comunicarea între file?

sobes.tech AI

Răspuns de la AI

Для организации общения между вкладками в браузере можно использовать несколько подходов:

  1. LocalStorage + событие storage

    • При нажатии на кнопку "стоп" в одной вкладке записываем в localStorage специальное значение, например, localStorage.setItem('playerAction', 'stop').
    • В других вкладках слушаем событие window.addEventListener('storage', ...), и при обнаружении изменения ключа playerAction выполняем остановку плеера.
  2. Broadcast Channel API

    • Создаем канал: const bc = new BroadcastChannel('player_channel').
    • При нажатии "стоп" отправляем сообщение: bc.postMessage('stop').
    • В других вкладках слушаем bc.onmessage и реагируем на команду.

Broadcast Channel API более современный и удобный способ, но поддерживается не во всех браузерах (хотя в большинстве современных — да).

Пример с LocalStorage:

// В каждой вкладке
window.addEventListener('storage', (event) => {
  if (event.key === 'playerAction' && event.newValue === 'stop') {
    // Остановить плеер
    player.stop();
  }
});

// При нажатии стоп
function onStopClick() {
  player.stop();
  localStorage.setItem('playerAction', 'stop');
}

Таким образом, изменение в localStorage служит сигналом для других вкладок.