Sobes.tech
Middle

Баракчада оюнчу бар. Бир баракчада токтотуу баскычын басканда, башка баракчада да ойнотуу токтоп калсын. Баракчалардын ортосундагы байланышты кандайча ишке ашырмаксың?

sobes.tech AI

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 служит сигналом для других вкладок.