Wisej: Closing Sessions
End User Session when Closing Browser or Tab
  1. Home
  2. Developer Blog
  3. Wisej Closing Sessions

Wisej: End User Session when Closing Browser or Tab

We mainly migrate non-web business applications to web applications with the help of Wisej. The customer's code is in general very sensitive related to user permissions, active sessions and so on. Therefore, we had to find a way to safely close a user session when the user just closes the browser tab or the browser itself.

In this example I implemented a way in Wisej to detect such a scenario. The user can decide if he wants to stay on the page or close the browser/tab.
Choosing the latter, the application will execute a last command on the server which can correctly log out the user from the application (if the user code is implemented in this way).

For many years this was an unsolvable task, now with Wisej it is easier than you think.

  1. We first create a new Wisej application.
  2. Add a new folder to your project named “Platform” and also add a new JavaScript file, just name it “BrowserClose.js”

  3. Set the Build Action for the JavaScript file to Embedded Resource:



  4. Make sure that you have this line uncommented in your AssemblyInfo.cs, so that your JavaScript file will be sent to the client:

     
    [assembly: WisejResources(ExcludeList: "")]
  5. Add the following code to the JavaScript file:

    $(document).ready(function () {
    LeavePageQuestion();
});

function LeavePageQuestion() {

    window.addEventListener("beforeunload", function (e) {
        var confirmationMessage = "Do you want to leave this page?";
        e.returnValue = confirmationMessage;     // Gecko and Trident
        return confirmationMessage;              // Gecko and WebKit

    });

    window.addEventListener('unload', function (e) {
        App.AppExit(e.currentTarget.Wisej.Core.session.id);
    });
}
  6. We just call, when document reaches the "ready" state, a function named “LeavePageQuestion”. In this function we attach two handlers. One for the “beforeunload” event and one for the “unload” event.
  7. When the “beforeunload” event is raised and you assign something to the e.ReturnValue or return something from this function, the browser will show you a dialog, asking whether you want to leave the page or stay on it. So, you still have the opportunity to stay on the page.
  8. If you decide to leave the page the “unload” event will be executed and a last request will be sent to the server. Here, I decided to execute a WebMethod.
  9. Therefore, we just add a new method to the Program.cs:

    [WebMethod]
public static void AppExit(string id)
{
    Debug.WriteLine("Application exits with ID: " + id);
}
  10. To access this method from the client, we have to flag it as a WebMethod.
  11. Now you can implement your logout stuff within this method and safely remove the current user from the application.
  12. UPDATE (thanks to an attentive reader!): We’re using the jQuery right at the beginning. At this time Wisej has not loaded jQuery yet. Therefore, we have to add jQuery in the Default.html file.

    <head>
    <title>CatchBrowserCloseExample</title> <meta charset="utf-8" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="wisej.wx"></script> </head>
web wisej