How To: Timeout (Client Side) using postMessage (HTML5) with Countdown alert

Page 2 of 2 FirstFirst 12
  1. #11
    Because... maybe you are active in the page (seeing, and movin mouse... doing thing in client side) but not in server side... the client time out don't expire, but when i do an operation server side was expired (getting an error).

    Then I need control time out only with client side.... but according to sesion time out (server side) and preventing expire from server side.

    I'll try sending a request to any page.

    Thanks!
  2. #12
    Well, sending a request to the page periodically is a common practice to keep Session alive.
  3. #13
    New version of TimeOut.js ... with Server Keep Alive prevention. Thanks to @daniil's idea ;)

    I'm using some code from: http://csharpdotnetfreak.blogspot.co...eep-alive.html

    Needs creation of: KeepAlive.aspx (View) in Home (Controller)

    // Session Timeout client side. Master and Detail detection.
    /**
    * Detecting in Master and Detail, Mouse and Keyboard events.
    * Using postMessage (HTML5)
    * @autor   Camilo Martinez [Equiman], http://gplus.to/equiman
    * @created 2012-04-11
    * @updated 2012-05-02
    * @licence CC BY-SA http://creativecommons.org/licenses/by-sa/3.0/
    */
      
    // URL Redirection
    var timeOutSession = function () {
        top.location.replace(GetNewPath('/Home/Timeout/'));
    };
       
    // Add this into Master Page (TabPanelContain):
    // <DocumentReady Handler="masterTimeOut();stopCount();" />
    var masterTimeOut = function () {
       
        //Convert minutes value indicated in TimeOut del Web.Config to seconds
        var min = 0;
        var sec = 0;
        var timer = null;
        var vis = false;
        var server = new Date().getTime() / 1000;
       
        doTimer = function () {
            // At least 1 min, show the countdown window
            if ((min - sec) < 60) {
       
                updateTime();
       
                if (frmTimeOut.hidden) {
                    vis = true;
                    frmTimeOut.setVisible(true);
                }
            }
            else {
                if (!frmTimeOut.hidden) {
                    vis = false;
                    frmTimeOut.setVisible(false);
                }
            }
       
            // Check the countdown counter
            if ((min - sec) > 0) {
                sec++;
                // Repeat the process each minute
                timer = setTimeout('doTimer()', 1000);
            }
            else {
                // When countdown is finish, redirect to Login page
                timeOutSession();
            }
        };
       
        stopCount = function () {
            if (vis === true) {
                //2 seconds Idle (no detect events, because showing alert window is detected as mousemove)
                if ((min - sec) < 58) {
                    vis = false;
                }
            }
            else {
                // Convert minutes to second
                min = (document.getElementById('txtMinTimeOut').value * 60);
                sec = 0;
                clearTimeout(timer);
                // Get actual time
                keepaliveServer((new Date().getTime() / 1000));
                doTimer();
            }
        };
    
        keepaliveServer = function (time) {
            // Validating not saturation of the server with sending Keep Alive request
            if ((time - server) > (min - 10)) {
    
                var pageToCall = GetNewPath('/Home/KeepAlive/');
    
                var requestParms = new Sys.Net.WebRequest();
                requestParms.set_url(pageToCall);
                requestParms.set_httpVerb("POST");
                var message = "I'm keeping you alive!";
                requestParms.set_body(message);
                requestParms.get_headers()["Content-Length"] = message.length;
                requestParms.add_completed(doNothing);
                requestParms.invoke();
    
                // Set new actual time
                server = time;
            }
        };
        doNothing = function (executor, eventArgs) { };
       
        updateTime = function () {
            var message = 'Inactivity was detected. Your session will expire in';
            var time = (min - sec);
            var unity = 'seconds.';
       
            Ext.getCmp('lblText').setText(message + ' ' + time + ' ' + unity);
        };
       
        // Start counter on Load
        document.onload = function () {
            stopCount();
            //return false;
        };
        // Star counter when mouse move
        document.onmousemove = function () {
            stopCount();
            //return false;
        };
        // Star counter when key is pressed
        document.onkeypress = function () {
            stopCount();
            //return false;
        };
       
        // Read and event when is send from an iFrame
        function displayMessage(e) {
            if ((e.origin.split(":", 2)[0] + ":" + e.origin.split(":", 2)[1]) === (GetNewPath("/").split(":", 2)[0] + ":" + GetNewPath("/").split(":", 2)[1])) {
                // If the iFrame send any of this events start counter
                switch (e.data) {
                    case "onload":
                    case "onmousemove":
                    case "onkeypress":
                     case "simulated":
                        stopCount();
                }
            }
        };
       
        if (window.addEventListener) {
            // For standards-compliant web browsers
            window.addEventListener("message", displayMessage, false);
        }
        else {
            window.attachEvent("onmessage", displayMessage);
        };
    };
       
       
    // Add this into any iFrame Page:
    // <DocumentReady Handler="detailTimeOut();" />
    var detailTimeOut = function () {
        // Start counter on Load
        document.onload = function () {
            top.postMessage("onload", GetNewPath("/"));
            return false;
        };
        // Star counter when mouse move
        document.onmousemove = function () {
            top.postMessage("onmousemove", GetNewPath("/"));
            //return false;
        };
        // Star counter when key is pressed
        document.onkeypress = function () {
            top.postMessage("onkeypress", GetNewPath("/"));
            //return false;
        };
        // Simulated Event
        simulatedEvent = function () {
            top.postMessage("simulated", GetNewPath("/"));
            //return false;
        };
    };
       
    // Get the Path when use VirtualPath in .Net or IIS
    var GetNewPath = function (relative_path) {
        var url = window.location.href;
       
        if (url.substring(url.length - 1, url.length) == '/') {
            url = url.substring(0, url.length - 1);
        }
       
        var url_parts = url.split('/');
       
        if (relative_path.substring(0, 1) != '/') {
            url_parts[url_parts.length - 2] = relative_path;
            url_parts[url_parts.length - 1] = '';
        }
        else {
            url_parts[url_parts.length - 2] = relative_path.substring(1);
            url_parts[url_parts.length - 1] = '';
        }
       
        var new_page_absolute_path = url_parts.join('/');
       
        if (new_page_absolute_path.substring(new_page_absolute_path.length - 1, new_page_absolute_path.length) == '/') {
            new_page_absolute_path = new_page_absolute_path.substring(0, new_page_absolute_path.length - 1);
        }
       
        return new_page_absolute_path;
    };
    Last edited by equiman; Nov 13, 2014 at 1:34 PM.
  4. #14
    Could you clarify is the problem resolved?
  5. #15
    Yes @daniil, thanks!

    Now, the code can be used to TimeOut (Client Side) and Keeping Alive Server Side
Page 2 of 2 FirstFirst 12

Similar Threads

  1. How to add HTML5 video tag in side form panel
    By arunsathyan in forum 1.x Help
    Replies: 2
    Last Post: Feb 15, 2022, 8:12 PM
  2. Replies: 4
    Last Post: Mar 19, 2010, 11:35 AM
  3. Replies: 0
    Last Post: Sep 17, 2009, 8:04 AM
  4. Ext.Msg.Alert from client script error
    By rthiney in forum 1.x Help
    Replies: 3
    Last Post: Jul 09, 2009, 3:51 PM
  5. Replies: 2
    Last Post: Jul 09, 2009, 2:35 PM

Tags for this Thread

Posting Permissions