我在Spring MVC、JSP 中实现了一个 Web 应用程序。
默认会话超时在web.xml 中定义为 30 分钟。
如果用户空闲 25 分钟，我需要向用户显示一个弹出窗口，其中包含 Your session is going to be end by 5 min, Please click OK to continue 的消息。
我们是否可以使用JavaScript、jquery 或任何其他方法来实现这一目标？
请提出建议。
【问题讨论】：
标签： java javascript jquery session
您可以使用以下插件 - Jtimeout jquery plugin 完美运行，也可配置。文档很清楚
【讨论】：
为了在前端通知用户超时，您需要从后端传递此信息。为此，我使用https://www.javaworld.com/article/2073234/tracking-session-expiration-in-browser.html 中的信息作为基线。
在控制器的每个响应方法中，您需要包含包含会话超时时间以及当前服务器时间的 cookie。由于听起来您已经在 web.xml 中设置了会话超时，因此您可以将 cookie 添加到您的响应中，类似于：
@RequestMapping(value="/example", method = RequestMethod.GET, produces = "application/json")
@ResponseBody
public ResponseEntity<Object> getExample(HttpServletRequest servletRequest, HttpServletResponse servletResponse) {
addTimeoutCookies(servletRequest, servletResponse);
//Do actual actions
return new ResponseEntity<Object>(HttpStatus.OK)
}
private void addTimeoutCookies(HttpServletRequest servletRequest, HttpServletResponse servletResponse) {
long currTime = System.currentTimeMillis();
long expiryTime = currTime + servletRequest.getSession().getMaxInactiveInterval() * 1000;
Cookie serverTimeCookie = new Cookie("serverTime", "" + currTime);
serverTimeCookie.setPath("/");
servletResponse.addCookie(serverTimeCookie);
Cookie expiryCookie = new Cookie("sessionExpiry", "" + expiryTime);
expiryCookie.setPath("/");
servletResponse.addCookie(expiryCookie);
}
然后，在前端，您需要检索这些 cookie 的值并将它们与客户端当前时间进行比较，以确定何时通知用户即将到来的会话超时。这是一个简单的代码块，基于此处的其他答案和链接中的文章：
var currTimeCookieName = 'serverTime';
var expireTimeCookieName = 'sessionExpiry';
var offset;
var warningTime = 5 * 60 * 1000;
var timeoutWarningMessage = 'Your session is going to be end by 5 min, Please click OK to continue';
function getCookie(name)
{
var name = name + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++)
{
var c = ca[i].trim();
if (c.indexOf(name)==0) return c.substring(name.length,c.length);
}
return "";
}
var serverTime = getCookie(currTimeCookieName);
serverTime = serverTime==null ? null : Math.abs(serverTime);
var offset = (new Date()).getTime() - serverTime;
function getTimeToWarning() {
var expireTime = getCookie(expireTimeCookieName);
return expireTime + offset - currTime - warningTime;
}
function checkForTimeout() {
var timeUntilWarning = getTimeToWarning();
setTimeout(function(){
if (getTimeToWarning() > 0) {
checkForTimeout();
} else {
if(confirm(timeoutWarningMessage)) {
//TODO do a backend call or other action to extend the session here
setTimeout(function() {
checkForTimeout();
}, 1 * 60 * 1000);
}
}
}, timeUntilWarning);
}
checkForTimeout();
【讨论】：
你可以像下面这样使用：我在像 header.jsp 这样的 jsp 页面中使用它。这对我来说可以。我正在使用 spring、jsp 和 jquery。
javascript：
<code>
<script type="text/javascript">
//var recall = true;
function loadDialog() {
var sessionAlive = ${pageContext.session.maxInactiveInterval};
var notifyBefore = 30; // Give client 15 seconds to choose.
setTimeout(function() {
$(function() {
$( "#dialog" ).dialog({
autoOpen: true,
maxWidth:400,
maxHeight: 200,
width: 400,
height: 200,
modal: true,
open: function(event, ui) {
setTimeout(function(){
$('#dialog').dialog('close');
}, notifyBefore * 1000);
},
buttons: {
"Yes": function() {
$.get("/about", function(data,status){
// alert("Data: " + data + "\nStatus: " + status);
});
$('#dialog').dialog("close");
loadDialog();
},
"No": function() {
$('#dialog').dialog("close");
}
},
close: function() {}
});
});
}, (sessionAlive - notifyBefore) * 1000);
};
loadDialog();
</script>
HTML 分区：
<div id="dialog" title="Session Timeout Info" style="display:none">
<p>
Your session will be timeout within 30 seconds. Do you want to continue session?
</p>
</div>
</code>
【讨论】：
TypeError: $(...).dialog is not a function
试试这个代码。希望它能解决你的问题。谢谢
var cookieName = 'sessionMsg';
var message = 'Your session is going to be end by 5 min, Please click OK to continue';
function getCookie(name)
{
var name = name + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++)
{
var c = ca[i].trim();
if (c.indexOf(name)==0) return c.substring(name.length,c.length);
}
return "";
}
function setSessionPrompt() {
var timeout = getCookie(cookieName) - new Date().getTime();
setTimeout(function(){
if (new Date().getTime() < getCookie(cookieName)) {
setSessionPrompt();
} else {
if(confirm(message)) {
// do your action here
}
}
}, timeout);
}
setSessionPrompt();
【讨论】：
你知道吗 windows.setTimeout
http://www.w3schools.com/jsref/met_win_settimeout.asp
这是你需要的
例如
var resetTime_int;
function resetTimer(){
if(resetTime_int) window.clearTimeout(resetTime_int)
resetTime_int=window.setTimeout(function (){
if(prompt('Your session is going to be end by 5 min, Please click OK to continue'))
location.reload()
}, 1000*60*25)
}
resetTimer()
document.onmousemove=resetTimer
document.onkeyup=resetTimer
1000*60*25 = 25 分钟。
【讨论】：
您应该使用 WebSockets 将数据从 Web 应用程序发送到客户端浏览器。
1) 计算服务器端的会话超时。 2) Websocket 会发送会话超时消息。
【讨论】：
您可以在每个请求上发送一个带有剩余时间（以毫秒为单位）的 cookie。然后您可以按照建议使用 setTimeout 但在执行超时功能时再次测试该值。如果值已更改，您可以重置超时。由于 cookie 是为整个域设置的，因此即使对于 ajax 或其他选项卡，它也始终是正确的。
var cookieName = 'sessionMsg';
var message = 'Your session is going to be end by 5 min, Please click OK to continue';
function getCookie(name)
{
var name = name + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++)
{
var c = ca[i].trim();
if (c.indexOf(name)==0) return c.substring(name.length,c.length);
}
return "";
}
function setSessionPrompt() {
var timeout = getCookie(cookieName) - new Date().getTime();
setTimeout(function(){
if (new Date().getTime() < getCookie(cookieName)) {
setSessionPrompt();
} else {
if(confirm(message)) {
// do your action here
}
}
}, timeout);
}
setSessionPrompt();
【讨论】：