web-dev-qa-db-ja.com

セッションがタイムアウトする前にユーザーに警告する

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または他のアプローチを使用してこれを達成できますか？

提案してください。

javajavascriptjquerysession
13
user3509911

このコードを試してください。うまくいけば、それはあなたの問題を解決します。ありがとう

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

次のように使用できます。header.jspのようなjspページで使用しています。それは私にとってはうまくいきます。私は春、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>
3
Md. Kamruzzaman

リクエストごとに残り時間（ミリ秒単位）を含むCookieを送信できます。次に、推奨されるようにsetTimeoutを使用できますが、timeout-functionが実行されたときに値をもう一度テストします。値が変更された場合は、タイムアウトをリセットできます。 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();
2
flec

フロントエンドのタイムアウトについてユーザーに通知するには、この情報をバックエンドから渡す必要があります。これを達成するために、ベースラインとして https://www.javaworld.com/article/2073234/tracking-session-expiration-in-browser.html の情報を使用しました。

コントローラの各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();
2
wardanuy

WebSocketを使用して、Webアプリケーションからクライアントのブラウザにデータを送信する必要があります。

1）サーバー側でセッションタイムアウトを計算します。 2）Websocketは、セッションタイムアウトメッセージに関するメッセージを送信します。

0
Nitul

次のプラグインを使用できます- Jtimeout jquery plugin 完全に動作し、設定も可能です。ドキュメントはかなり明確です

0
Srimoyee Sen