Недавно зашел на гитхаб. Открыл 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
#browser #javascript
