Как GitHub обнаруживает вход/выход?

Question

При открытии нескольких вкладок/окон на веб-сайте GitHub, если вы случайно вошли в/из одного из них, вы получаете уведомление обо всех остальных, требующих перезагрузки для обновления состояния сеанса.

Как это делается?

Все, что я знаю, до сих пор страницы HTML код содержит некоторые скрытые SVG графический + пролеты, которые активируются с помощью JavaScript:

<div class="js-stale-session-flash stale-session-flash flash flash-warn flash-banner d-none"> 
    <svg aria-hidden="true" class="octicon octicon-alert" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path d="M8.865 1.52c-.18-.31-.51-.5-.87-.5s-.69.19-.87.5L.275 13.5c-.18.31-.18.69 0 1 .19.31.52.5.87.5h13.7c.36 0 .69-.19.86-.5.17-.31.18-.69.01-1L8.865 1.52zM8.995 13h-2v-2h2v2zm0-3h-2V6h2v4z"></path></svg> 
    <span class="signed-in-tab-flash">You signed in with another tab or window. <a href="">Reload</a> to refresh your session.</span> 
    <span class="signed-out-tab-flash">You signed out in another tab or window. <a href="">Reload</a> to refresh your session.</span> 
</div> 

Answer 1

Это делается с storageEvents.

В принципе, интерфейс Storage испускает storage event на глобальные объекты, на которые он влияет.

По существу, на каждой сгенерированной загрузке GitHub GitHub устанавливает метатег с именем «user-login». Это будет текущий пользователь.

Например, если просмотреть исходный код страницы, что я загружен в GitHub, исходный код содержит следующую строку:

<meta name="user-login" content="timgws"> 

Затем, каждый раз, когда страница загружается, то значение содержания в извлекаются , и хранится внутри LocalStorage. Грубо говоря, с JQuery код:

localStorage.setItem("logged-in", $("meta[name='user-login']").attr("content"); 

Наконец, последний магический фокус в том, чтобы слушать для storage события, забрать, если имя пользователя изменилось, а затем включите видимость flash класса.

var currentUser = localStorage.getItem("logged-in"); 
window.addEventListener("storage", function (event) { 
    if (event.storageArea === localStorage && event.key === "logged-in" 
     && event.newValue !== currentUser) { 

     $('.flash').removeClass('d-none'); 
    } 
}); 

Вы можете добавить некоторый код, чтобы различать пользователей при входе в систему и выход (который должен быть довольно легко, сравнивая значение currentUser)