Недавно зашел на гитхаб. Открыл 2 вкладки, в одной из них я залогинился, во второй — нет. Когда открыл вторую, там увидел вот такое сообщение.

“You signed in with another tab or window. Reload to refresh your session.”

Думаю, а как гитхаб понял, что я залогинился в другой вкладке? Пошел смотреть в дев тулзах — соединения по вебсокетам не нашел.

Пошел гуглить, узнал, что существует BroadcastChannel, с помощью которого можно реализовать взаимодействие между вкладками. Не знаю, он ли используется на гитхабе, но фича интересная.

Накидал демку — нужно открыть несколько вкладок и просто нажать “+1”, значение обновится во всех вкладках, при этом будет указано, в какой именно вкладке произошло изменение.

Использовать очень просто, создаёшь канал с именем, а дальше из одной вкладки можно отправлять сообщения, а в другой — слушать их и как-то на это реагировать.

const channel = new BroadcastChannel('broadcast-demo');
 
button.addEventListener('click', () => {
  channel.postMessage({
    type: 'session:changed'
  });
});
 
channel.onmessage = (event) => {
  if (event.data.type === 'session:changed') {
    console.log('Получили сообщение из другой вкладки');
  }
};

👍 — было полезно
👀 — уже знали про BroadcastChannel