Sunday, April 1, 2012

Implementing a Client Session Timeout for intensive data access

Often there is a scenario where the user displays a live page that polls the data from server every few seconds to update some contents on page. In case, the user leaves for hours without shutting down the browser. As a result, the page keeps on sending requests, generating a significant—and useless—workload for the server.
On the server, there's session timeout, but in AJAX there's also the client session that matters. To detect the end of a client session, you need to check whether there was user activity such as clicking and tapping for a given amount of time.To detect the end of a session based on a timer, set up a client timer that expires after a specified number of seconds, stops the ongoing task, and pops up an alert box. If the user responds to the prompt, processing resumes as usual. This example update the datetime every 3 seconds and then show confirm dialog box every 10 seconds to ask the user.

Client Session Timeout

Put the below script to <head> tag.
<script type="text/javascript">
    var timer = null;
    function pageLoad() {
        if (timer == null) {
            timer = setTimeout("stopTask()", 10000);
        }
    }
    function pageUnload() {
        if (timer != null)
            clearTimeout(timer);
    }
    function stopTask() {
        // Stop the clock
        var clock = $find("<%= Timer1.ClientID%>");
        clock._stopTimer();
        AskIfTheUserWantsToContinue();
    }
    function AskIfTheUserWantsToContinue() {
        // Ask if the user wants to continue
        var answer = window.confirm("Is it OK to continue with the clock?");
        if (answer) {
            // Restart the task 
            var clock = $find("<%= Timer1.ClientID%>");
            clock._startTimer();
            // Restart our own timeout engine
            if (timer != null)
                timer = setTimeout("stopTask()", 10000);
            return;
        }
    }
</script>

Add the following code to <form> tag.
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="Updatepanel1" runat="server">
    <ContentTemplate>
        <asp:Timer ID="Timer1" runat="server" Interval="3000" OnTick="Timer1_Tick"></asp:Timer>
        <asp:Label ID="Label1" runat="server"></asp:Label>
    </ContentTemplate>
</asp:UpdatePanel>

In code-behind, code snippet is as below:
protected void Page_Load(object sender, EventArgs e)
{
    if (!Page.IsPostBack)
        Label1.Text = DateTime.Now.ToLongTimeString();
}
protected void Timer1_Tick(object sender, EventArgs e)
{
    Label1.Text = DateTime.Now.ToLongTimeString();
}
The idea is to set up a timer that periodically asks the user if he really wants to continue with the clock. The timeout code first stops the clock and then displays the message box. Based on the user's response, the clock is restarted.
The code utilizes the $find function to locate an ASP.NET AJAX component. So, we need asp.net ajax ScriptManager.

Single-page Interface and AJAX Patterns

No comments:

Post a Comment