CODEWITHSUNDEEP
javascriptperformance
Frank Myat Thu
Frank Myat Thu

Reputation: 4474

JavaScript session management across multiple browser tabs

I am trying to control web application time out at client side. Using JavaScript I can detect if user is idle or active. So if user don't make any action for certain period of time, then my JavaScript setTimeout(callback, millisecond) will be fired. Following this approch I can manage my application to be logout automatically.

But when multiple tabs of browser is viewing my same page at the same time, the logout event is not synchronize between multiple browser tabs. I want it to be synchronize.

For example, firstly user load my web page using tab no.1 and then before time out is arrived he open tab no.2 and browse the same web page and using it very actively at tab no.2. But at that time, since the tab no.1 is not actively using, tab no.1 triggered timeout. I don't want to be like that. I want it to be active since user is using actively the same web page at different tab.

So I used htm5 localStorage to keep/check the maximum session time across different browser tabs as long as user is active.

<html>
<head>
    <script type="text/javascript">
        var timeout_time = 5;
        var time_remaining = 0;

        setInterval(function(){
            time_remaining = localStorage.getItem('timeout_time');
            console.log("time_remaining = ", time_remaining);
            if(time_remaining > 1 || time_remaining != null){
                localStorage.setItem('timeout_time', time_remaining - 1000);
            }
        }, 1000);

        function SetTimerForAppSession() {
            onInactive(logout, timeout_time * 1000);
        }

        function logout() {
            console.log('Logout');

            if(localStorage.getItem('timeout_time') <= 0)
            {
                window.location = "//plnkr.co/";
            }
            else
            {
                console.log("Logout.SetTimerForAppSession");
                SetTimerForAppSession();
            }
        }

        function onInactive(callback, millisecond) {
            var wait = setTimeout(callback, millisecond);

            document.onmousemove =
            document.onmousedown =
            document.onmouseup =
            document.onmousewheel =
            document.DOMMouseScroll =
            document.onkeydown =
            document.onkeyup =
            document.ontouchstart =
            document.ontouchmove =
            document.onscroll =
            document.focus = function () {

                // clear
                clearTimeout(wait);
                localStorage.removeItem('timeout_time');

                // reset
                wait = setTimeout(callback, millisecond);
                localStorage.setItem('timeout_time', millisecond)
            };
        }
    </script>
</head>
<body onload="SetTimerForAppSession();" >
    .... keep active so that your session will never be expired. .....
</body>

Finally I can manage session time out across different browser tab. But I don't think my approach is correct way since I need to rely on setInterval function. I also worry about application performance.

So please kindly let me know if you have better solution.

Plunker

Upvotes: 2

Views: 2207

Answers (1)

JasonB
JasonB

Reputation: 6368

This idea assumes your application will be interacting with the server on a regular basis when a user is active. You could have a manual logout call and an automatic logout call. When the server sees a manual logout request, it obeys. If the request is for an automatic logout, you check to see if that user is active and decide whether or not to obey that request. I wouldn't be worried about a single well managed timeout adding any CPU load.

Upvotes: 0

Related Questions