Как общаться между вкладками браузера js?

Question

[jenya7771]

Здравствуйте, у меня есть необходимость синхронизировать обновление access токена между вкладками, так как когда токен будет обновлен, и этот токен попытается обновить другая вкладка, сервер ответ что refresh токен был не найден.

Я пробывал использовать синхронизацию через localStorage и window.postMessage, но это не сработало в моем случае.
Так как у меня несколько вкладок могут начать обновлять токен одновременно, и тогда начинаются проблемы.

Первая вкладка проверяет в localStorage обновляет токен, в ответе isLoading = false. Вторая вкладка тоже в это время проверяет, и isLoading = false. В итоге обе вкладки отправит запросы для обновления токена на сервер, один токен обновится, а во второй вкладке ответ от сервера будет 404, и тогда либо делать редирект на страницу аутентификации, либо выводишь ошибку и просить повторить попытку.

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

Как можно реализовать это, какое хранилище можно использовать?

Answer 1

[profesor08]

https://developer.mozilla.org/ru/docs/Web/API/Wind...

Получаешь токен, пихаешь в localStorage, при этом все остальные вкладки получают событие storage. А значит, просто слушая этот ивент, ты сможешь обновить токен где тебе надо, на всех вкладках.

Comments

[jenya7771]

Мне же нужно как-то всем остальным вкладкам сказать, что получать токен будет вкладка №1, а вы ждите.
При таком подходе как вы предлагаете, не совсем понимаю как такое можно сделать?

[profesor08]

jenya7771, как только ты поместишь что-то в localstorage, так сразу сработает это событие на всех остальных вкладках.

[jenya7771]

profesor08, вот у меня 3 вкладки и в localStorage лежит под ключом isLoadToken значение false, и все 3 одновременно захотят обновить токен и каждая вкладка перед обновлением проверит что isLoadToken === false, и все 3 вкладки одновременно изменят это значение на isLoadToken=true, и только потом эти вкладки получат события в storage от двух соседних вкладок, а уже будет поздно, запрос вкладки успеют отправить.
Возможно я не правильно рассуждаю конечно.

[profesor08]

jenya7771, не надо гадать и выдумывать проблемы вида "что если". У тебя не могут быть все три вкладки активными.

[jenya7771]

profesor08, проблема в том, что токен используется для подключения через веб-сокет, и если например сервер перезагрузится или у пользователя пропадет интернет на мгновение, то все открытые веб-сокеты упадут и через пару секунд попробуют подключится, и тогда появляется та ситуация "что если", проверял локально, и в боевых условиях тоже. В боевых конечно не часто такое было, но все-таки было, и хочется от этого избавится. Уменьшил частоту такого, просто добавив рандомное время в интервал попытки переподключения к сокету, но такие ситуации возникали.

[Алексей Лавров]

jenya7771, так вот, если делать, как говорит человек выше. Какая-то из страниц решает сделать запрос, она в localStorage переводит значение isLoadToken в значение true, остальные страницы получают событие storage и узнают, что какая-то другая страница решила сделать запрос, соответственно это будет значить, что этим страницам делать запрос не надо)

[profesor08]

jenya7771, вот вкладки отослали запрос, вот одна получила ответ, записала все в localstorage. Остальные вкладки получили ошибку, проверяют нет ли новых данных в localStorage (простой проверкой токена который в памяти с токеном который в localStorage), потом повторяют попытку соединения с новыми данными, и их соединяет.

Answer 2

[rPman]

в похожей ситуации я реализовывал семафор следующим способом

if(localstorage['имя_семафора']++>1)
{ // значит этот семафор уже кто то занял,
  localstorage['имя_семафора']--;
  //  ждем некоторое время и повторяем попытку
}  else
{ // никто семафор не занял можно работать
  ...
  // по окончанию работы семафор надо освободить
  localstorage['имя_семафора']--;
}

смысл в том что localstorage[]++ это атомарная операция (вот в этом месте я скорее всего не прав), а благодаря тому что единственная опасная операция, которая могла бы вклиниться между работай с localstorage и if - это --, и она проихойдет когда семафор и так должен освободиться, т.е. проблем это не создаст.

p.s. почему говорю семафор а не мьютекс, потому что можно сравнивать не только с 1 но и большим числом - это определит, сколько одновременно можно ресурс занимать
p.p.s. в интернете гуляет реализацию мьютекс на javascrit как раз на localstorage но она какая то переусложненная и я не понимаю зачем
если кто то по умнее, объясните пожалуйста

Answer 3

[Николай]

https://developer.mozilla.org/en-US/docs/Web/API/B...