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

Ответ 1

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

Ответ 2

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

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

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

Ответ 3

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

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

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)

Ответ 4

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

Ответ 5

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

Ответ 6

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

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.
}

Ответ 7

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

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

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

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

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

Ответ 8

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

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

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

Ответ 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;" /> 

Ответ 10

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

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