Как я могу определить с помощью JavaScript / jQuery, активен ли пользователь в данный момент на странице?

Question

Мне нужно определить, когда пользователь неактивен (не нажимает и не печатает) на текущей странице более 30 минут.

Я думаю, что может быть лучше использовать распирание событий, прикрепленное к тегу body, а затем просто продолжать сбрасывать таймер в течение 30 минут, но я не совсем уверен, как его создать.

У меня есть jQuery, хотя я не уверен, сколько из этого на самом деле будет использовать jQuery.

Редактировать: Мне больше нужно знать, активно ли они используют сайт, поэтому нажимаю (изменение полей или позиции в поле или выбор флажков / радио) или вводим текст (во вводе, textarea , так далее). Если они находятся на другой вкладке или используют другую программу, то я предполагаю, что они не используют сайт и поэтому должны быть отключены (по соображениям безопасности).

Редактировать # 2: Таким образом, все ясно, это совсем не для определения, вошел ли пользователь в систему, аутентифицирован или что-то еще. Прямо сейчас сервер выйдет из системы, если пользователь не сделает запрос страницы в течение 30 минут. Эта функция предотвращает время, когда кто-то тратит> 30 минут, заполняя форму, а затем отправляя форму, только чтобы узнать, что они не вышли из системы. Следовательно, это будет использоваться в сочетании с сайтом сервера, чтобы определить, неактивен ли пользователь (не нажимает или не печатает). По сути, дело в том, что после 25 минут простоя им будет представлен диалог для ввода пароля. Если этого не произойдет в течение 5 минут, система автоматически отключит их, а также выйдет сеанс сервера (при следующем доступе к странице, как и на большинстве сайтов).

Javascript используется только как предупреждение для пользователя. Если JavaScript отключен, они не получат предупреждение и (вместе с тем, что большая часть сайта не работает) будут отключены при следующем запросе новой страницы.

Answer 1

Это то, что я придумал. Кажется, он работает в большинстве браузеров, но я хочу быть уверен, что он будет работать везде и всегда:

var timeoutTime = 1800000;
var timeoutTimer = setTimeout(ShowTimeOutWarning, timeoutTime);
$(document).ready(function() {
    $('body').bind('mousedown keydown', function(event) {
        clearTimeout(timeoutTimer);
        timeoutTimer = setTimeout(ShowTimeOutWarning, timeoutTime);
    });
});

Кто-нибудь видит какие-либо проблемы?

Answer 2

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

Answer 3

Я только недавно сделал что-то подобное, хотя и использовал Prototype вместо JQuery, но я думаю, что реализация будет примерно такой же, пока JQuery поддерживает пользовательские события.

Короче говоря, IdleMonitor - это класс, который наблюдает за событиями мыши и клавиатуры (настраивается соответственно вашим потребностям). Каждые 30 секунд он сбрасывает таймер и передает событие state: idle, если только он не получает событие мыши / клавиши, и в этом случае он передает событие state: active.

var IdleMonitor = Class.create({

    debug: false,
    idleInterval: 30000, // idle interval, in milliseconds
    active: null,
    initialize: function() {
        document.observe("mousemove", this.sendActiveSignal.bind(this));
        document.observe("keypress", this.sendActiveSignal.bind(this));
        this.timer = setTimeout(this.sendIdleSignal.bind(this), this.idleInterval);
    },

    // use this to override the default idleInterval
    useInterval: function(ii) {
        this.idleInterval = ii;
        clearTimeout(this.timer);
        this.timer = setTimeout(this.sendIdleSignal.bind(this), ii);
    },

    sendIdleSignal: function(args) {
        // console.log("state:idle");
        document.fire('state:idle');
        this.active = false;
        clearTimeout(this.timer);
    },

    sendActiveSignal: function() {
        if(!this.active){
            // console.log("state:active");
            document.fire('state:active');
            this.active = true;
            this.timer = setTimeout(this.sendIdleSignal.bind(this), this.idleInterval);
        }
    }
});

Тогда я просто создал другой класс, в котором где-то есть следующее:

Event.observe(document, 'state:idle', your-on-idle-functionality);
Event.observe(document, 'state:active', your-on-active-functionality)

Answer 4

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

Answer 5

Ifvisible - хорошая библиотека JS для проверки бездействия пользователя.

ifvisible.setIdleDuration(120); // Page will become idle after 120 seconds

ifvisible.on("idle", function(){
   // do something
});

Answer 6

Используя jQuery, вы можете легко наблюдать за движением мыши и использовать его, чтобы установить переменную, указывающую активность на true, затем, используя vanilla javascript, вы можете проверять эту переменную каждые 30 минут (или любой другой интервал), чтобы увидеть, является ли она истинной. Если это неверно, запустите вашу функцию или что-то еще. Найдите setTimeout и setInterval для определения времени. Вам также, вероятно, придется запускать функцию каждую минуту или около того, чтобы сбросить переменную на false.

Answer 7

Если это проблема безопасности, то выполнение этой клиентской стороны с помощью javascript является абсолютно неправильным концом канала для выполнения этой проверки. Пользователь может легко отключить JavaScript: что тогда делает ваше приложение? Что делать, если пользователь закрывает свой браузер до истечения времени ожидания. они когда-нибудь выходят из системы?

Большинство серверных сред имеют некоторые настройки времени ожидания сеанса для входа в систему. Просто используйте это и спасите себя от инженерных работ.

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

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

Пожалуйста, поверьте мне, когда я говорю, что использование javascript таким образом (и требующий javascript для входа в систему !!) - невероятно толстый способ создания любого веб-приложения.

Answer 8

Вот мой снимок:

var lastActivityDateTime = null;

function checkActivity( )
{
    var currentTime = new Date();
    var diff = (lastActivityDateTime.getTime( ) - currentTime.getTime( ));
    if ( diff >= 30*60*1000)
    {
        //user wasn't active;
        ...
    }
    setTimeout( 30*60*1000-diff, checkActivity);
}

setTimeout( 30*60*1000, checkActivity); // for first time we setup for 30 min.


// for each event define handler and inside update global timer
$( "body").live( "event_you_want_to_track", handler);

function handler()
{
   lastActivityDateTime = new Date();
   // rest of your code if needed.
}

Answer 9

Без использования JS более простым (и более безопасным) способом было бы просто сохранить метку времени lastActivity во время сеанса пользователя и проверить ее при загрузке страницы. Предполагая, что вы используете PHP (вы можете легко переделать этот код для другой платформы):

if(($_SESSION['lastAct'] + 1800) < time()) {
    unset($_SESSION);
    session_destroy();
    header('Location: session_timeout_message.php');
    exit;
}

$_SESSION['lastAct'] = time();

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

<meta http-equiv="refresh" content="1801;" /> 

Answer 10

Если ваша проблема - потеря информации для пользователя после тайм-аута входа в систему; другой вариант - просто сохранить всю опубликованную информацию при открытии нового сеанса (новый сеанс всегда будет запускаться, когда старый сеанс был закрыт / удален сервером), когда запрос к странице выполняется перед повторным маршрутизация на страницу входа. Если пользователь успешно вошел в систему, вы можете использовать эту сохраненную информацию, чтобы вернуть пользователя туда, где он был. Таким образом, даже если пользователь уйдет на несколько часов, он всегда сможет вернуться туда, где он был после успешного входа в систему; без потери информации.

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