Tips for maintaining server session by tracking user activity on the browser using a simple ajax request to the server without relying on JQuery

In my website, the server session Timeout is set to 30 minutes.

<system.web>
          <sessionState timeout="30" />
     </system.web>
    

However, if a user is actively engaging with the site by typing a long comment or selecting checkboxes, I want to extend their session beyond the specified timeout. For example, if a user becomes inactive after 10 minutes of typing, then returns after 20 minutes, they should not be automatically logged out since the total idle time was only 20 minutes, not the full 30 minutes. I have attempted to implement a code snippet to check for user activity, but it seems to conflict with the web.config settings mentioned earlier. Is there a way to keep the session active when the user is interacting with the browser without resorting to simply redirecting them to logout.aspx? I want to properly end the server session without creating unnecessary dummy pages. Is there a solution using basic Ajax calls to the server without relying on jQuery? Thank you!


    var IDLE_TIMEOUT = 60; //seconds
    var _idleSecondsCounter = 0;
    
    document.onclick = function() {
        _idleSecondsCounter = 0;
    };
    
    document.onmousemove = function() {
        _idleSecondsCounter = 0;
    };
    
    document.onkeypress = function() {
        _idleSecondsCounter = 0;
    };
    
    window.setInterval(CheckIdleTime, 1000);
    
    function CheckIdleTime() {
        _idleSecondsCounter++;
        
        if (_idleSecondsCounter >= IDLE_TIMEOUT) {
            alert("Your session has timed out!");
            document.location.href = "logout.aspx";
        }
    }
    

Answer №1

Consider utilizing the http option technique.

function maintainConnection(url) {
  var xhr ;
  if (window.XMLHttpRequest) {
    xhr=new XMLHttpRequest();
  }
  else if (window.ActiveXObject) {
    xhr=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.open("OPTION",url,true);
  xmlhttp.send(null);
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Running Stored Procedures in ASP.NET MVC using LINQ

As a beginner in ASP.NET, I have a query regarding executing a stored procedure on a server. Currently, with the ASP.NET MVC framework, I am able to retrieve data from a table successfully as shown below: Controller: public JsonResult GetLaptopsJson() { ...

Error rendering {message} object on the Chrome Console

In my ReactJS component, I am utilizing the {message} parameter from props. Check out the code snippet below: import React from "react"; const MyMessage = ({ message }) => { if (message?.attachments?.length > 0) { return ( < ...

Enhancing User Experience with Bootstrap V5 Form Validation and Sweetalert2: Displaying a Message of Success Upon Successful Submission

I am currently working on implementing a simple form using Bootstrap 5 that includes validation. My goal is to display an alert message when the form field is successfully submitted using Sweetalert2. Below is the code I have: HTML <form action=&q ...

Creating dynamic django modal popup forms with AJAX integration for server-side data processing

Looking for innovative solutions and modern patterns or Django apps to efficiently handle server-side forms that appear in a popup window. Here's what I'm after: User triggers a modal popup window through an action. The form ...

Transferring the output of a function to a different state

My current challenge involves sending data from one controller to another within an Ionic application. Despite creating a service for this purpose, I am still unable to share the data successfully. The send() function in MainCtrl is meant to pass the data ...

Issue: Angular 14 - Validators Not Resetting in Nested FormGroup

I am currently working on implementing a nested FormGroup. However, I have encountered an error when attempting to reset the form. Here is the structure of the form: form: UntypedFormGroup; this.form = this.fb.nonNullable.group({ f1: [''], f2: ...

What purpose does the class serve in typescript?

This is a unique version of app.component.ts in the Angular Tour of Hero tutorial. import { Component } from '@angular/core'; export class Superhero{ name : string; id : number; } const SUPERHEROES : Superhero[] = [ {name : 'Wonder ...

I was able to efficiently reverse the transition using JavaScript, but I'm puzzled as to why my alternate approach is not functioning correctly

Check out my demo on jsfiddle I am trying to implement a reverse transition when clicking the <li> again. The commented code did not work, but the code below worked perfectly: let dbclickre = true; function flipped() { if (db ...

Mobile site experiencing slow scrolling speed

The scrolling speed on the mobile version of my website, robertcable.me, seems to be sluggish. Despite conducting thorough research, I have not been able to find a solution. I have attempted to address the issue by removing background-size: cover from my ...

What is the best way to erase information displayed when hovering over an element using mouseout?

Whenever the user hovers over an image, an information box appears regarding that specific image. The information inside the box changes as I move over another image, but when not hovering over any images, the information box remains visible. Unfortunately ...

Python's Selenium RC is limited to sending text to only one tinymce control on a page

Currently, I am working on writing automated test scripts with Python (2.7) and Selenium RC (2.42.1) for a webpage that has multiple tinymce controls (2 to be exact). The code I have been using so far is as follows: sel.focus( field_values[ id_value ] + " ...

Using JQuery or JavaScript to retrieve the HTTP header information of a specified URL

Hey there! I was wondering if it's possible to retrieve the HTTP Header information for a URL using JavaScript? The URL mentioned above points to the current page, but I'm interested in fetching the header details for any given URL (such as ) C ...

Using nodeMCU along with ajax means that instead of refreshing just a single element, the entire web page

I'm in need of assistance with reloading two elements on my webpage. I am working with small electronics and the NodeMCU as its brain. I require two outputs (connected to relays) and two inputs. For the inputs, I would like them to update periodicall ...

Angular is programmed to detect any alterations

Upon detecting changes, the NgOnChanges function triggers an infinite service call to update the table, a situation that currently perplexes me. Any assistance on this matter would be greatly appreciated. Many thanks. The TableMultiSortComponent functions ...

What is causing Mocha.js to be unable to locate the module?

Having trouble with mocha.js not being able to locate my path! Here's the directory structure I have set up for my node course project: ///////Root --package.json --node_modules/ --playground --server -server.js -db -models ...

Angular 4: Unhandled error occurred: TypeError - X does not exist as a constructor

I am currently developing a project in Angular 4, and I encountered an error while running the application. The specific error message is as follows - ERROR Error: Uncaught (in promise): TypeError: index_1.EmployeeBase is not a constructor TypeError: in ...

Tips for retrieving sent data from a jQuery Ajax request on XHR error

I am facing a situation where I have numerous jQuery AJAX requests being sent using a single function. function sendData(data){ $.post("somepage", {"data": data}, function() {}, "json") .fail(function(jqXHR, textStatus, errorThrown){ sendD ...

Issue with PHP's ng-click not functioning properly with Angular JS's dynamic HTML generation

I'm just starting out with Angular JS. I'm trying to create an ng-click event in dynamically generated HTML from PHP, here's the code snippet. var app = angular.module('pageapp',[]); angular.module('pageapp') .filter(& ...

The font in my Next.js / Tailwind CSS project starts off bold, but unexpectedly switches back to its original style

I recently integrated the Raleway font into my minimalist Next.js application with Tailwind CSS. I downloaded the font family in .ttf format and converted it to .woff2, but I'm having trouble changing the font weight using custom classes like font-bol ...

The custom validator in Material2 Datepicker successfully returns a date object instead of a string

Im currently working on developing a unique custom validator for the datepicker feature within a reactive form group. Within my code file, specifically the .ts file: form: FormGroup; constructor( private fb: FormBuilder, ...