Implementing a heartbeat pattern with AJAX and ASP.NET

Problem
So I’m working on a web application, where I needed a way to detect when a user has closed their browser.

Javascript’s onunload event looked promising. However, it is unable to differentiate between a browser closing, a postback, and a page refresh.

After talking (i.e. complaining) to Kyle, he suggested this Stack Overflow solution on implementing a heartbeat pattern, letting the server know when the client was no longer active.

Heartbeat Pattern
In the heartbeat pattern (where you can read more about here), the client will send a signal to the server indicating that it’s still alive every 10 minutes (or whatever time interval you want.)

Look. I made this with MS Paint and MakeAGif.com, okay?

When a client misses a check-in, the server will know that it is no longer active. At this point, the server can decide to terminate the session (or take another course of action.)




Implementation

In the main page, I pretty much ripped off the code form the Stack Overflow solution above. There are some minor differences, because I am not using an HTTP handler as suggested. Instead, in the GET request I am (1) requesting an aspx page, (2) sending data to the aspx page, (3) I’m creating an alert with the data that comes back, (4) and I’m leaving empty the last optional parameter.

Default.aspx:

Instead of using an HTTP handler, I’m using another aspx page. Both this aspx and its code-behind page can be left empty and the session will still be kept alive. But below, I’m returning the data I’ve passed through the GET request and the current date-time.

ImStillAlive.aspx.cs:

You can see the working code on my GitHub page. If you have any questions, comments, or suggestions, please let me know!

And thanks to Michael for talking me through the jquery (because I didn’t know any) and letting me avoid HTTP handlers.

Image (in part) via ClassRoomClipArt

 




5 comments on “Implementing a heartbeat pattern with AJAX and ASP.NET

  1. To cleanup a little, I’d suggest writing the setTimeout like this:
    setInterval(heartbeat, 5000);
    Which removes the need for the extra setTimeout in your Ajax callback. The downside is that you aren’t waiting for your previous request to finish… Also, note that you can pass the function itself as the parameter rather than a string to eval.

    This is a great pattern; I’ve used it mainly for keeping sessions alive on websites.

    1. Thanks for the suggestions, Chip! I saw the different ways of passing a function, but I didn’t really know the differences other than syntax. So I just used the same syntax from the Stack Overflow example.

      Kyle was the one that told me about it! I’m trying to read more about design patterns.

  2. How fast is it?

    If I use, for example setInterval(heartbeat, 1000) and 1000 instances of the webpage will use it at the same time, how many resources (CPU, RAM, Network) will it consume?

    Regards

Leave a Reply

Your email address will not be published. Required fields are marked *