3

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

Для чего нужно: я хочу создать объект EventSource лишь на одной вкладке с сайтом, при закрытии/обновлении этой "главной" вкладки - перекидывать "главность" на любую другую вкладку. Поток будет получать данные, если обновляются статистические счетчики, пихать в localStorage измененные данные, далее, на всех вкладках будут обновляться данные. В принципе, это не особо важно - просто написал, вдруг существует еще более дешевый и простой способ это сделать.

Собсно вот... попробовал сделать, долго очень копался (может я просто не очень понимал, что именно нужно искать), но вот как-то получилось. Когда подгружается страница, считывается "специальная переменная" из localStorage - если вдруг там null, то значение localStorage перезаписывается на "555" (красивое число просто). Также при этом устанавливается, что при событии unload (только на "главной" вкладке) значение "специальной переменной" очистится, что вызовет на всех вкладках с моим сайтом mainStorageFunction - и какая-то из вкладок снова станет "главной".

Интересует меня:

  1. нормальный ли это способ?
  2. гарантирует ли это, что у будет всегда ровно одна "главная" вкладка (если вкладки с моим сайтом есть)?
  3. в принципе реально может возникнуть ситуация, когда "главная" вкладка зависла или взорвалась и событие unload по какой-то причине не вызвалось. или оно вызовется в любом случае, даже если питание отключить?

P.S. нет, просто аяксом не хочу постоянно долбить сервер, это противоречит моей религии.

document.addEventListener('DOMContentLoaded', function(){
    mainStorageFunction();

    window.addEventListener('storage', function(e) {
        mainStorageFunction();
    });
});

function mainStorageFunction () {
    if (localStorage.getItem('now_stored') === null) {
        localStorage.setItem('now_stored', 555);
        window.addEventListener('unload', function () {
            localStorage.removeItem('now_stored');
        });
        document.getElementById('wai').innerHTML = 555;
    } else {
        document.getElementById('wai').innerHTML = 0;
    }
}
<div id="wai"></div>

12
  • А что будет если пользователь закроет главную вкладку, или даже что ещё хуже она зависнет? 11 дек 2017 в 15:28
  • @ДмитрийПолянин, последовательно: сначала вызывается событие unload, по которому localStorage.removeItem('now_stored');, ну а так как произвелась манипуляция с localStorage, то вызывается следом mainStorageFunction(); во всех остальных вкладках - какая-то из них "успевает", как бы это выразиться, "стать главной". 11 дек 2017 в 15:30
  • а если вкладка зависнет, или по какой-то другой причине unload не вызовется? 11 дек 2017 в 15:31
  • @ДмитрийПолянин, неееет = ( тоже интересный вопрос, что можно в этом случае придумать. 11 дек 2017 в 15:33
  • 1
    хотя смотрю в вопросе есть.... тогда непонятно в чем проблема) надо наверное весь вопрос прочитать чтоли 11 дек 2017 в 15:38

2 ответа 2

2

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

С учётом вышесказанного ваше решение нормально, заисключением того что необходимо продумать ситуацию при которой главная вкладка может зависнуть, умереть или быть закрыта без вызова unload.

Как решение это в некоторую localStorage переменную главной вкладкой каждые 15 секунд записывать текущее время. А другие вкладки проверяют это время, если разница в записи с текущим временем больше например чем 40 Секунд, значит главная вкладка умерла или зависла. Кроме того продумать ситуацию если старая главная вкладка отвиснет.

Может быть ситуация что сразу несколько вкладкок захотят стать главной после смерти старой главной. Тут можно просто первая которая захотела, ставит специальный флаг в localStorage, и другие уже проверяют установлен этот флаг или нет. Хотя 100% защиты это не даст, но вероятность двух главных табов будет невысока.

2

Нс сколько кроссбраузерным должно быть решение? Просто вполне возможно, вам нужен service worker. Он будет мастер-процессом, а все вкладки в этом случае будут слейвами, так что не надо будет думать на тему того как переключать мастера.

4
  • Полезные ссылочки посоветуете какие-нибудь, где про это прочитать? 11 дек 2017 в 17:22
  • Ну я лично всё изучаю по документации или путём экспериментов. Так что посоветовать могу только developer.mozilla.org/ru/docs/Web/API/Service_Worker_API/…
    – Gheljenor
    11 дек 2017 в 17:24
  • что-то не получается заставить serviceWorker-а поддерживать EventSource - он его создает и тут же обрубает (судя по всему, это связано со "временем жизни serviceWorker-а). Или нужно использовать не eventSource, а что-то другое? 13 дек 2017 в 16:52
  • 1
    Да, прошу прощения, кажется я затупил. ServiceWorker действительно является коротко-живущей сущностью. Есть другой вид воркеров - SharedWorker'ы - они как раз живут долго и умеют работать с нескольким окнами. developer.mozilla.org/ru/docs/Web/API/SharedWorker И тут кстати кто-то очень похожу задачу решал аналогичным методом: stackoverflow.com/questions/35837967/…
    – Gheljenor
    13 дек 2017 в 18:02

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.