javascript - 当用户返回时,非活动/浏览器关闭状态为 0并返回 1

  显示原文与译文双语对照的内容

当他们不活动或者关闭浏览器时,我试图让网站设置在线用户的状态 0. 如果他们重新打开网站或者从空闲的( 超时后) 返回,我希望状态回到 1 ( 除非他们已经完全退出,因为没有从站点中的长期退出)

以下是我目前尝试的内容:

Inactive.php


include 'db.php';


mysql_query("UPDATE users SET status = 0 WHERE user_id =".$_SESSION['user_id']."");



如果浏览器关闭了 Check检查


window.onbeforeunload = function() {


 $.ajax({


 url: 'inactive.php',


 type: 'GET',


 async: false,


 timeout: 4000


 });


 };



检查空闲超时


var IDLE_TIMEOUT = 60;//seconds


var _idleSecondsCounter = 0;


document.onclick = function() {


 _idleSecondsCounter = 0;


};


document.onmousemove = function() {


 _idleSecondsCounter = 0;


};


document.onkeypress = function() {


 _idleSecondsCounter = 0;


};


window.setInterval(CheckIdleTime, 1000);



function CheckIdleTime() {


 _idleSecondsCounter++;


 var oPanel = document.getElementById("SecondsUntilExpire");


 if (oPanel)


 oPanel.innerHTML = (IDLE_TIMEOUT - _idleSecondsCounter) +"";


 if (_idleSecondsCounter> = IDLE_TIMEOUT) {


 alert("Time expired!");


 document.location.href ="inactive.php";


 }


}



我的查询似乎不起作用。 我如何告诉它每秒检查一次用户?

时间: 原作者:

修订代码

这里代码将参考我在这里编写的示例>> jquery-idle与 jquery-ui对话框。

使用的库:

嵌入式库示例:


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>


<script src="http://thorst.github.io/jquery-idletimer/prod//src/idle-timer.js"></script>


<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css"/>


<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>



没有jQuery对话框:


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>


<script src="http://thorst.github.io/jquery-idletimer/prod//src/idle-timer.js"></script>



请记住,你可以使用你喜欢的对话方法来输出对话框代码。 为了使事情尽可能简单,我在对话框中加入了 jquery 。 就像你在代码中所涵盖的那样,这也不处理 beforeunload 事件,但是我建议在这里进一步阅读>> beforeunload stackoverflow文章 <<

说明

HTML

这一行代码是用来存放倒计时计时器的占位符。 为了简化事件,当计时器过期时,我还使用它来显示"会话过期""


<div id="sessionSecondsRemaining" style="font-size: 22px; font-weight: bolder;"></div>



这是一个使用 jQuery UI的非常简单的模态对话框。 你可以扩大它,或者在空闲时替换它。


<div id="dialog-confirm" title="Logout" style="display: none;">


<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;">Your session has expired.</span></p>


</div>



没有jQuery对话框


<div id="sessionSecondsRemaining" style="display:none;"></div>



CSS

因为它没有正确显示,所以它仅仅是一个小的hack,因为它没有显示在 jQuery UI 模式对话框中( 为什么还没有被固定在--中


/* override jquery ui overlay style */


.ui-widget-overlay {


 background-image: none!important;/* FF fix */


 background: #000 url(images/new-ui-overlay.png) 50% 50% repeat-x;


}



没有jQuery对话框

  • 不需要 CSS

Javascript

本节是你可以配置 jquery-idletimer参数的地方。


 var


 session = {


//Logout Settings


 inactiveTimeout: 10000,//(ms) The time until we display a warning message


 warningTimeout: 10000,//(ms) The time until we log them out


 minWarning: 5000,//(ms) If they come back to page (on mobile), The minumum amount, before we just log them out


 warningStart: null,//Date time the warning was started


 warningTimer: null,//Timer running every second to countdown to logout


 logout: function () {//Logout function once warningTimeout has expired


//window.location = settings.autologout.logouturl;


 },



//Keepalive Settings


 keepaliveTimer: null,


 keepaliveUrl:"",//set the Keep Alive URL here (aka keepalive.php)


 keepaliveInterval: 5000,//(ms) the interval to call said url


 keepAlive: function () {


 $.ajax({ url: session.keepaliveUrl });


 }


 }


 ;



要添加'keepalive.php'支持,只需设置 keepalive.php 所在位置的完整 URL 。


 keepaliveUrl:"http://example.com/keepalive.php",//set the Keep Alive URL here (aka keepalive.php)



这一行,初始化并设置 # sessionSecondsRemaining div中的值。


 $('#sessionSecondsRemaining').html(Math.round((session.warningTimeout - diff)/1000));



本节将放置控制对话框的代码,警告会话过期倒计时( 通常是 #sessionSecondsRemaining 在这里对话框中)


 $("#dialog-confirm" ).dialog({


 resizable: false,


 height:140,


 modal: true,


 buttons: {


"Extend": function() {


 clearTimeout(session.warningTimer);


 $( this ).dialog("close" );


 },


 Cancel: function() {


 session.logout();


 $( this ).dialog("close" );


 }


 }


 });



没有jQuery对话框

  • 删除最后一个 block

如果你注意到,'扩展'终止警告计时器,并且取消调用注销函数( 也可以配置 上面 )

最后,这个 block 对于计时器计数到零的情况非常重要,并且控制倒计时 inside # sessionSecondsRemaining的显示。


 if (remaining> = 0) {


 $('#sessionSecondsRemaining').html(remaining);


 } else {


 $( '#dialog-confirm' ).dialog("close" );


 clearInterval(session.warningTimer);


 $( '#sessionSecondsRemaining' ).html('Session Expired');


 session.logout();


 }



else 下,可能是你真正需要在 上面 block 中修改的惟一位置。 在那里,我调用 session.logout() 函数( 应该是对话框清理后的最后一行,但这只是一个演示) 。 在这里关闭对话框,/或者将用户重定向到会话过期页面,或者显示消息。 如果停留在同一页上,请确保 clearInterval(session.warningTimer); 如果没有那么那一行就不重要了。

没有jQuery对话框


 if (remaining> = 0) {


 $('#sessionSecondsRemaining').html(remaining);


 } else {


 clearInterval(session.warningTimer);


 session.logout();


 }



keepalive.php


if (session_status()!== PHP_SESSION_ACTIVE) { session_start(); }


include 'db.php';


$maxtimeout = 15;//Seconds for max timeout before forcing session reset on other users.


mysql_query("UPDATE users SET status = 1 WHERE user_id =".$_SESSION['user_id']."");


mysql_query("UPDATE users SET status = 0 WHERE user_id <>".$_SESSION['user_id']." AND (UNIX_TIMESTAMP() - UNIX_TIMESTAMP(`timestamp_field`))>". $maxtimeout."";



任务应该设置为运行服务器端来从任何外接程序中清除数据库( 如果你有很多活动) 。

cron.php


include 'db.php';


//Set this for a longer timeout than in keepalive.php


$maxtimeout = 90;//Seconds for max timeout before forcing session reset on other users.


mysql_query("UPDATE users SET status = 0 WHERE (UNIX_TIMESTAMP() - UNIX_TIMESTAMP(`timestamp_field`))>". $maxtimeout."";



原作者:
...