Question

我在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或任何其他方法实现这一目标吗？

请建议。

Answer 1

试试这段代码。希望它能解决你的问题。感谢

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();

Answer 2

你可以使用如下：我在jsp页面中使用它，如header.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：

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

Answer 3

你可以发送一个cookie，其中包含每个请求的剩余时间（以毫秒为单位）。然后您可以按建议使用setTimeout，但在执行timeout函数时再次测试该值。如果值已更改，您可以重置超时。由于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();

Answer 4

为了通知用户前端超时，您需要从后端传递此信息。为此，我使用https://www.javaworld.com/article/2073234/tracking-session-expiration-in-browser.html中的信息作为基线。

在Controller中的每个Response方法中，您需要包含包含会话超时时间以及当前服务器时间的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();

Answer 5

您应该使用WebSockets将数据从Web应用程序发送到客户端浏览器。

1）计算服务器端的会话超时。 2）Websocket将发送有关会话超时消息的消息。

Answer 6

您可以使用以下插件-Jtimeout jquery plugin 完美运行，也可以配置。文档很清楚

Answer 7

你知道吗？ 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分钟。

在会话超时之前警告用户

7 个答案: