Effectuer automatiquement une action côté client à l'expiration de la session

Je veux afficher dans un <p:growl> que la session a expiré.
J'ai trouvé beaucoup de méthodes pour gérer la fin de la session comme Délai d'expiration de Session et ViewExpiredException la manipulation sur le JSF/PrimeFaces requête ajax, mais je ne pouvais pas pousser un visages message à <p:growl>.

Au point, comment puis-je exécuter automatiquement certains (JavaScript) code côté client lors de la session HTTP est automatiquement expiré à côté serveur?

source d'informationauteur

  1. 14

    Vous pouvez utiliser PrimeFaces inactif moniteur pour cela. L'utilisateur est redirigé vers la déconnexion de l'action après la temporisation d'invalider la session. 2 minutes avant le compte à rebours de la boîte de dialogue s'affiche pour avertir l'utilisateur. Après le déplacement de la souris de nouveau la séance est prolongée.

    PrimeFaces ralenti surveiller et dialogue est placé dans un modèle, vous pouvez ajouter à chaque page qui est en cause:

    <?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<ui:composition>
<h:form prependId="false">
<p:idleMonitor
timeout="#{session.maxInactiveInterval * 1000 - 125000}"
onidle="startIdleMonitor()"
onactive="timeoutDialog.hide()" />
<p:dialog id="timeoutSession"
header="#{msg['session.expire']}"
widgetVar="timeoutDialog"
showEffect="fade" hideEffect="fade"
modal="true"
width="400"
height="110"
closable="false"
draggable="false"
resizable="false"
appendToBody="true"
onHide="stopCount()"
onShow="doTimer()">
<br />
<p>
<span class="ui-icon ui-icon-alert" style="float: left; margin: 8px 8px 0;"/>
<p:panel>
#{msg['logoff.soon.1']}
<span id="dialog-countdown" style="font-weight: bold"></span>
#{msg['logoff.soon.2']}
</p:panel>
</p>
<br />
<p style="font-weight: bold;">#{msg['move.cursor']}</p>
</p:dialog>
<p:remoteCommand name="keepAlive" actionListener="#{auth.keepSessionAlive}" />
</h:form>
<script type="text/javascript">
var TIME = 120; //in seconds
var countTimer = TIME;
var processTimer;
var timer_is_on = 0;
var redirectPage = "#{request.contextPath}/auth/j_verinice_timeout";
var countDownDiv = "dialog-countdown";
var txtCountDown = null;
if (!txtCountDown)
txtCountDown = document.getElementById(countDownDiv);
function startIdleMonitor() {
countTimer = TIME;
txtCountDown.innerHTML = countTimer;
timeoutDialog.show();
}
function timedCount() {
txtCountDown.innerHTML = countTimer;
if (countTimer == 0) {
stopCount();
window.location.href = redirectPage;
return;
}
countTimer = countTimer - 1;
processTimer = setTimeout("timedCount()", 1000);
}
function doTimer() {
if (!timer_is_on) {
timer_is_on = 1;
timedCount();
}
}
function stopCount() {
clearTimeout(processTimer);
timer_is_on = 0;
keepAlive();
}
</script>
</ui:composition>
</html>
    • Ligne 11: Le délai d'inactivité de l'écran est défini par le système var session.maxInactiveInterval. La valeur que vous avez définie dans votre web.xml ou la configuration du serveur.
    • Ligne 12/13: méthode Javascript startIdleMonitor() est appelée après le délai d'attente, sans aucune interaction de l'utilisateur. Cette méthode ouvre la boîte de dialogue. timeoutDialog.hide() est appelée lorsque l'utilisateur est occupé de nouveau: boîte de Dialogue est fermée
    • Ligne 26/27: Deux méthodes Javascript sont appelés lorsque la boîte de dialogue afficher ou de masquer: doTimer() commence et stopCount() arrête le compte à rebours.
    • Ligne 40: PrimeFaces de commande à distance pour garder la session en vie. En appelant une méthode arbitraire sur le serveur de la séance est prolongée. Commande est appelée par la méthode Javascript keepAlive() en ligne 78.
    • Ligne 59-68: méthode Javascript timedCount() est appelée à chaque seconde pour exécuter le compte à rebours. Après la temporisation de redirection se fait en ligne 63.

    Pour activer la gestion des timeouts dans plusieurs pages comprennent le délai d'attente le modèle de votre modèle de mise en page:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xml:lang="de-DE">
<h:head>
...
</h:head>
<body>
<ui:include src="/template/sessionTimeOut.xhtml" />
<ui:include src="/nav.xhtml"/>>
<ui:insert name="content">Default content</ui:insert>
<ui:include src="/footer.xhtml"/>>
</body>
</html>

    Un temps spécifique pour votre application web, vous pouvez mettre dans votre web.xml:

    <!--?xml version="1.0" encoding="UTF-8"?-->
<web-app>
...
<session-config>
<!-- Session idle timeout in min. -->
<session-timeout>30</session-timeout>
</session-config>
</web-app>

    Vous pouvez en savoir plus sur cette solution de ce blog: JSF et PrimeFaces: Délai d'expiration de Session de Manutention

  2. 8

    Si vous êtes sur JSF 2.3, vous pouvez utiliser une session étendue <f:websocket> pour cela. Lors de la session expire à côté serveur, puis le <f:websocket> est automatiquement fermée avec près 1000 ("normale fermeture").

    En d'autres termes, il suffit de faire:

    <f:websocket ... scope="session" onclose="sessionScopedSocketCloseListener" />

    function sessionScopedSocketCloseListener(code) {
if (code == 1000) {
alert("Session has expired!");
}
}

    Vous pouvez si nécessaire de combiner cela avec l'API JavaScript de la <p:growl>.

    <p:growl widgetVar="growl" ... />

    PF("growl").renderMessage({severity: "warn", summary: "Session has expired!" });

    Si vous n'êtes pas sur JSF 2.3 encore, alors vous pouvez toujours utiliser <o:socket> à la place qui propose exactement la même onclose fonctionnalité <f:websocket>. Voir aussi Comment peut-server push asynchrone des modifications à une page HTML créée par JSF?

  3. 2

    Le code posté par @uı6ʎɹnɯ lǝıuɐp je est très utile, mais je vais ajouter quelques observations:

    • @Jonathan L sugests remplacer processTimer = setTimeout("timedCount()", 1000) à setInterval("timedCount()", 1000). Je pense que du bon sens, mais besoin de quelques
      modifications:

      function doTimer() {
if (!timer_is_on) {
timer_is_on = 1;
processTimer = setInterval("timedCount()", 1000);
}
}
function stopCount() {
clearInterval(processTimer);
timer_is_on = 0;
keepAlive();
}

    • La méthode timedCount() peut être changé:

      function timedCount() {
txtCountDown.innerHTML = countTimer;
if (countTimer > 0) {
countTimer = countTimer - 1;
} else {
clearInterval(processTimer);
doLogout();
}
}

      Et vous avez besoin d'ajouter, en vertu de la keepAlive remoteCommand quelque chose comme ceci:

      <p:remoteCommand name="doLogout" action="#{loginMB.logout()}" 
process="@this" partialSubmit="true" immediate="true" />

      À L'Intérieur De Managed Bean:

      public void logout() {
FacesContext.getCurrentInstance().getExternalContext().invalidateSession();
validUser = false;
loggedUser = false;
redirectToPage("/login.xhtml");
}
private void redirectToPage(String page) {
ExternalContext context = FacesContext.getCurrentInstance().getExternalContext();
context.redirect(context.getRequestContextPath() + page);
}

      Rappelez-vous l'attribut name="doLogout" de p:remoteCommand est converti dans une fonction javascript que vous pouvez appeler de n'importe où. Il est parfait pour itérer la vue avec managed bean.

      Cette approche permettra d'éviter que votre système de piles de la ViewExpiredException.

    • Certaines personnes ne comprennent pas la keepAlive concept, mais il est très facile, il suffit d'ajouter une fonction simple à l'intérieur de votre managed bean. Exemple keepSessionAlive action:

      public void keepSessionAlive () {
System.out.println(">>> Session is alive... ");
}

      Souviens de la p:remoteCommand nommé keepAlive est une fonction javascript appelée keepAlive() et qui appellent une action keepSessionAlive à l'intérieur de votre managed bean.

      Cette action, les signes que vous ne sont pas inactifs.

    • La session.maxInactiveInterval de idleMonitor références <session-timeout> de web.xml

      <p:idleMonitor timeout="#{session.maxInactiveInterval * 1000 - 125000}"
onidle="startIdleMonitor()" onactive="timeoutDialog.hide()" />

      Je recommande de mettre moniteur de session pour exécuter 5 secondes avant de terminer la séance pour éviter l'érosion doLogout() après la fin de la session et obtenir le ViewExpiredException.

      La première ligne de code javascript est var TIME = 120; //in secondsce qui représente le temps de finaliser la session. Le code d'origine # {session.maxInactiveInterval * 1000 - 125000} utilisera d'expiration de session mutiplicated par 1.000 (parce que c'est milisecondes) et soustraire 125.000 qui représente 125 secondes, 5 secondes de moins que compteur, donc n'a pas besoin de modifications.

    J'espère que cela aide... Bonne Chance!