Как определить, смотрит ли пользователь на страницу?
Всем привет! Сегодня мы рассмотрим, как определить, смотрит ли пользователь на страницу?
Вы довольно часто могли видеть это функционал на сайтах. Два самых простых случая:
1) Если пользователь неактивен в течение какого-то времени, то он автоматически деавторизуется. Сделано для защиты аккаунта пользователя.
2) Если пользователь неактивен в течение какого-то времени, то он автоматически отключается от сервера и подключается к нему только тогда, когда снова станет активен. Удобно, чтобы не нагружать лишним соединением сеть и сервера. Используется в социальных сетях и других высоконагруженных проектах.
Кажется, что реализовать такой полезный функционал довольно трудно, однако это не так. Существует много разных библиотек, которые вы можете подключить и радоваться, но в этой статье мы не будем их использовать, а попробуем сделать все сами на чистом javascript. Уверяю вас, это не сложно!
Существует много самых разных реализаций, мы же будем использовать Page Visibility API.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Как определить, активен ли пользователь?</title>
</head>
<body>
<script>
var pollCount = 1;
var poll = function() {
if(document.hidden) {
return;
}
console.log('Опрошено ' + pollCount + 'раз');
pollCount++;
};
setInterval(poll, 1000);
document.addEventListener('visibilitychange', function() {
console.log('Видимость изменена на ' + document.visibilityState + '!');
});
</script>
</body>
</html>
Теперь откройте консоль, посмотрите, что начался отсчет. Теперь перейдите на другую вкладку, а потом вернитесь. Вы увидите, что сначала видимость изменилась на hidden, а потом на visible.
Вот так просто вы можете отследить, смотрит ли пользователь на страницу.
Спасибо за внимание!
-
Создано 17.03.2015 19:02:42
-
Михаил Русаков
Комментарии (1):
хмм... очень интересно, спасибо, попробую)
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.