web-dev-qa-db-fra.com

Avertir l'utilisateur avant la fin de la session

J'ai une application Web implémentée dans Spring MVC, JSP.
Le délai d'expiration de session par défaut défini dans web.xml est de 30 min. 

si l'utilisateur est inactif pendant 25 minutes, il me faut afficher une fenêtre contextuelle indiquant à l'utilisateur le message Your session is going to be end by 5 min, Please click OK to continue. 

Pouvons-nous atteindre cet objectif en utilisant JavaScript, jquery ou toute autre approche? 

Veuillez suggérer. 

javajavascriptjquerysession
12
user3509911

Essayez ce code. Espérons que cela résoudra votre problème. Merci

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

Vous pouvez utiliser comme suit: Je l’utilise dans une page jsp comme header.jsp. Ça fonctionne bien pour moi. J'utilise printemps, jsp et 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>

Div 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>
3
Md. Kamruzzaman

Vous pouvez envoyer un cookie avec le temps restant (en millisecondes) à chaque demande. Vous pouvez ensuite utiliser setTimeout comme suggéré, mais tester à nouveau la valeur lorsque la fonction timeout est exécutée. Si la valeur a changé, vous pouvez réinitialiser le délai. Comme le cookie est défini pour l’ensemble du domaine, il sera toujours correct, même pour ajax ou d’autres onglets.

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

Afin d'informer l'utilisateur des délais d'attente sur le frontend, vous devez transmettre ces informations à partir de votre backend. Pour ce faire, j'ai utilisé les informations contenues dans https://www.javaworld.com/article/2073234/tracking-session-expiration-in-browser.html comme base.

Dans chaque méthode de réponse de votre contrôleur, vous devez inclure des cookies contenant le délai d'expiration de la session, ainsi que l'heure actuelle du serveur. Comme il semble que vous ayez déjà défini le délai d'expiration de la session dans votre fichier web.xml, vous pouvez ajouter les cookies à votre réponse de la manière suivante:

@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);
}

Ensuite, sur le client, vous devez récupérer les valeurs de ces cookies et les comparer à l'heure actuelle du client pour déterminer quand informer l'utilisateur du délai d'expiration de la session. Voici un simple bloc de code pour le faire, basé sur les autres réponses ici et l'article sur le lien:

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

Vous devez utiliser WebSockets pour envoyer des données de l'application Web au navigateur des clients.

1) calculez les délais de session côté serveur 2) Websocket enverra le message relatif au message de délai de session.

0
Nitul