Недавно зашел на гитхаб. Открыл 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 => { if (event.data.type === ‘session:changed’) { console.log(‘Получили сообщение из другой вкладки’); } };

❤️ — было полезно 🍾 — уже знали про BroadcastChannel

#browser #javascript