Как отправить запрос на сервер при закрытии вкладки?

Question

[Paul14]

Хочу отправить запрос на сервер при закрытии вкладки, что пользователь не в сети. Параметр online = 0.
Стек react, php, mysql. Доступа к серверу нет, хостинг обычный.

useEffect(() => {
    
        const handleBeforeUnload = (event) => {
                QDB.edit(manager.id, { online: 0, logout_date: D_TimeNow(), navigator: navigator.userAgent }, 'users');
        };
    
        window.addEventListener('beforeunload', handleBeforeUnload);
        return () => { window.removeEventListener('beforeunload', handleBeforeUnload); };

    }, []);

Все ок, однако браузер не различает перезагрузку страницы, закрытие всего браузера, закрытие конкретной вкладки - как разные действия. Мне нужно, чтобы только при закрытие владки отправлялся запрос к БД.

Как проигнорировать перезагрузку страницы?

В инетах пишут про sessionStorage. Не получилось.

const sessionSecondLoad = sessionStorage.getItem('sessionSecondLoad');
if (!sessionSecondLoad)      sessionStorage.setItem('sessionSecondLoad', 'true');
// Функция размонтирования компонента
 const handleBeforeUnload = (event) => {
sessionStorage.getItem('sessionSecondLoad'); // будет равна актуальному значению true - то есть в момент закрытия не будет удалена, поэтому не могу понять, что это именно закрытие вкладки, а не перезагрузка
}

Comments

[Aetae]

Что значит "доступа к серверу нет"? А к чему есть? Ты юзерскрипт пишешь или сторонний клиент к чему-то?

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

Если же не надо отличать закрытие всего браузера от закрытия вкладки(а нафига?), только от обновления, то тут уже по-проще.

P.S. Может тебе проще вообще visibilitychange использовать, а не закрытие? Ну или вообще забить - и слать всегда офлайн при анлоад и онлайн при старте, и пофиг что мигать будет.

[Paul14]

Нет доступа к серверу. У меня обычный веб-хостинг с какой-то модернизированной сPanel, где есть файловый менеджер и пара mysql баз. К конфигурации сервера, ПО нет доступа. Веб-хостинг короче.
Да, только закрытие любого вида и перезагрузку нужно чекать. Посмотрел про visibilitychange. Евент отработает если перейти на другую вкладку или свернуть бразуер. В комментарии ниже Данила приводил пример с pagehide, который не сработал. Поверить не могу, что такая простая задача может быть белым пятном в программировании.

[Paul14]

Единственный работающий для меня вариант:

// При перезагрузке или закрытии окна
QDB.edit(manager.id, { online: 0, logout_date: D_TimeNow(), navigator: navigator.userAgent }, 'users');
...
// При авторизации
const loginDate = sessionStorage.getItem('crm_session_login_date') || D_TimeNow();
const logoutDate = sessionStorage.getItem('crm_session_logout_date') || manager.logout_date;   // Предыдущее значение из данных после авторизации 
sessionStorage.setItem('crm_session_login_date', loginDate);
sessionStorage.setItem('crm_session_logout_date', logoutDate);        
QDB.edit(manager.id,{online:1, login_date: loginDate, logout_date: logoutDate, navigator: navigator.userAgent},'users')

То есть еще раз перезаписываем даты логина и логинаута в момент авторизации, если есть сессия с сайтом.

Answer 1

[Александр]

Можно попробовать воспользоваться вот этим апи https://developer.mozilla.org/ru/docs/Web/API/Navi... для того чтоб слать запрос при закрытии вкладки но это же при будет срабатывать и при перезагрузке страницы.
Но по опыту могу сказать что у вас немного неправильный подход. Ваше решение если и будет работать то только в "идеальных" случаях, но очень часто будет работать не так как вы ожидаете, например пропал интернет, выключился компьютер, в телефоне села батарейка, пользователь закрыл браузер выбросив его из недавних и т.д. в этих всех случаях пользователь у вас зависнет в статусе онлайн. Чтоб справится с этими проблемами шлите, например, каждые 10 секунд (интервал подберите экспериментальным путем или исходя из того какую нагрузку может держать ваш хостинг) запрос на ваш бек, таким образом будете подтверждать что пользователь онлайн, если в течении 25 секунд (желательно чтоб время было >2х чем интервал, чтоб исключить ситуации когда один из запросов не доехал из за кратковременных проблем в сети) не было запросов от клиента значит он офлайн.

Comments

[Paul14]

Спасибо. Я рассматривал такой подход. Есть пару вопросов:
1) Каждые 10 сек в текущей сессии человек шлет запросы на сервер, который в свою очередь перезаписывает в базе данных поле lastConnection например на актуальную дату. Как сервер поймет, что если человек уже 1 минуту как не шлет запросы, то должен перезаписать данные в базе данных? Получается мне нужно развернуть какой-то Cron php скрипт, который так же каждую минуту проверяет колонку lastConnection у пользователей по условию?
2) Если будет открыто на клиенте 2+ вкладки. Каждая будет слать запросы. Как технически проверить, сколько сейчас вкладок подключено? Сессия существует для каждой отдельной вкладки отдельно. Если сохранять в ЛокалСтораж, то его тоже нужно как-то очищать при закрытии вкладки, что опять приводит к началу.

[Александр]

1) вам не нужно в бд перезаписывать данные, вам достаточно поля lastConnection, а онлайн или не онлайн определяйте на основе данного поля, т.е. если lastConnection - now() < 60 sec значит человек онлайн.
2) Не совсем понял что вам нужно и для чего вам что то хранит в localStorage? Если вам реально нужно знать что у кого-то открыто несколько вкладок то при открытии сайта гененируруйте какой ни будь uuid и шлите его на сервер, в этом случае схема БД немного усложняется, так как вам нужно будет в отдельной таблице хранить связку user | uuid | lastConnection . Таким образом сделав запрос select user, uuid from table where lastConnection - now() < 60 sec (запрос не рабочий просто для примера) вы получите все активные вкладки для конкретного пользователя

[Paul14]

Александр, Спасибо. Так и сделаю.

Answer 2

[Ivan SCM]

Заведите константу а-ля какое время считать пользователя активным, например минута.
При каждом запросе записывайте время этого запроса (действия пользователя).
Далее простая функция пусть вычисляет онлайн пользователь или нет(прошла минута с последнего запроса этого пользователя или нет).

Данное решение используется во многих движках сайтов и форумов.

Comments

[Paul14]

То есть правильно я понимаю, что напрямую записывать в базу данных у пользователя поле online = 0 или 1 не нужно. Как только юзер в текущей сессии с сайтом, каждую минуту записываем текущую дату например в поле lastConnect в базе в его данных. Потом, когда я вижу монитор (на скриншоте), то вывожу онлайн юзеры или нет на основании сравнения текущего времени и поля lastConnect у каждого юзера?
Если да, то мне все равно нужно знать когда он ливнул. Ну чтобы понимать сколько человек работал времени.

Answer 3

[Данила]

Можно установить флаг в sessionStorage для условия перезагрузки страницы:

useEffect(() => {
  sessionStorage.setItem('isReloading', 'true');

  const handleBeforeUnload = (event) => {
    const isReloading = sessionStorage.getItem('isReloading');
    if (isReloading === 'false') {
      QDB.edit(manager.id, { online: 0, logout_date: D_TimeNow(), navigator: navigator.userAgent }, 'users');
    }
  };

  const handleUnload = () => {
    sessionStorage.setItem('isReloading', 'false');
  };

  window.addEventListener('beforeunload', handleBeforeUnload);
  window.addEventListener('unload', handleUnload);

  return () => {
    window.removeEventListener('beforeunload', handleBeforeUnload);
    window.removeEventListener('unload', handleUnload);
  };
}, []);

Comments

[Paul14]

Не работает, запрос все равно выполняется при перезагрузке.

[Данила]

Paul14,

useEffect(() => {
  const handlePageHide = (event) => {
    if (event.persisted || performance.navigation.type === performance.navigation.TYPE_RELOAD) {
      return;
    } else {
      QDB.edit(manager.id, { online: 0, logout_date: D_TimeNow(), navigator: navigator.userAgent }, 'users');
    }
  };

  window.addEventListener('pagehide', handlePageHide);

  return () => {
    window.removeEventListener('pagehide', handlePageHide);
  };
}, []);

[Paul14]

Данила, не работает, к сожалению