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

Я недавно сделал что-то подобное, хотя и использовал 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)

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

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

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

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

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

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

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

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

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

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

Без использования 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;" />