Как можно определить последнюю открытую вкладку сайта в браузере, на JS?

Question

[slava kk]

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

Если открыть сразу несколько вкладок сайта в одном браузере, то все они будут отправлять фоновые запросы, что будет создавать лишнюю нежелательную нагрузку на сервер. Достаточно лишь, чтобы эти запросы отправлялись в последней открытой вкладке. Как средствами JS можно определить такую вкладку?

Comments

[ksnk]

Page Visibility API
ну или
document.hasFocus()

Answer 1

[rPman]

Вопрос составлен ужасно, но если я верно понял - у вас высокая нагрузка на сервер из-за неправильно выбранной технологии.

Чтобы на стороне клиента мониторить события, которые им хочет сообщать сервер, вам нужны websocket или хотя бы long pooling (устаревшая технология на тот случай, если вебсокеты не доступны).

Первое очень просто - клиент держит специальное подключение к специальному websocket серверу, который вы должны поднять на сервере (реализация вебосокет есть на всех популярных языках, начиная с php).
Пример сервера - https://reactphp.org/
На клиенте - штатный https://developer.mozilla.org/en-US/docs/Web/API/W...

Второе - специальный запрос к бакенд серверу на файл, который сервер не отдает до тех пор пока ему не понадобится что то сообщить клиенту (причем каждому клиенту сервер по своему отдает это файл), это реализуется на любом языке очень просто, но не так эффективно как через вебсокет сервер.
Пример -https://github.com/panique/php-long-polling

Comments

[slava kk]

А смысл даже на том-же websocket держать лишние подключения? Открою я 10 вкладок сайта, и будет считаться как 10 разных клиентов для ws. Хотя, возможно для websocket`a это не такая уж и большая нагрузка. А Long Polling тем более не пойдет, плюс еще и оперативку хорошо кушать будет держание кучи php процессов.

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

[rPman]

затраты на поддержание вебсокет подключений на порядки ниже вашего варианта с периодическими опросами данных

а ваш вопрос, вам нужно определить активность вкладки и останавливать запросы если она неактивна
Пробуй document.hidden прямо на таймере отправки запроса, и если неактивна - не отправляй

[slava kk]

rPman, Как раз запросы должны отправляться. Там обновляется счетчик уведомлений и сообщений. И когда приходит новое - то включается звуковой сигнал. (Работает так же, как у ВК например). А если не отправлять - то пользователь так и не узнает о новом сообщении, если вкладка будет открыта в фоне

[rPman]

необходимо считать как долго человек сидит за активной вкладкой? websocket отлично это позволит отследить, так же отсылай туда изменения состояния document.hidden

Answer 2

[Надим]

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

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