Arbitrary Timeout Counter Using Moment.js

readme.md

This code is useful for displaying a "login session timing out soon" message to the user and redirecting to a login page if the user's session has already timed out.

backbone.view.example.js

Backbone.View.extend({
  events: {
    'click .continue': 'extendSession'
  },

  initialize: function () {
    this.warnIntervalInSeconds = 60;
    this.inactivityTimeoutInMinutes = 2;
    this.sessionTimingOutMessageShown = false;
    this.template = '<p>Your session will timeout shortly. Please click Continue to resume your session.</p><button class="button continue">Continue</button>';

    this.setSessionTimeout();
    this.intervalId = setInterval(this.checkForTimeout, 100);
  },

  setSessionTimeout: function () {
    this.sessionTimeout = moment(new Date()).add(this.inactivityTimeoutInMinutes, 'm');
  },

  checkForTimeout: function () {
    var now = moment(new Date()),
        timeDiffInSeconds = this.sessionTimeout.diff(now) / 1000;

    // has the user already timed out?
    if (this.sessionTimeout.isSameOrBefore(now)) {
      // redirect to login page.
      window.location.href = Paths.user.login;
      clearInterval(this.intervalId);
    }

    // is the user timing out in the next minute?
    if (timeDiffInSeconds <= this.warnIntervalInSeconds && !this.sessionTimingOutMessageShown) {
      this.showSessionTimingOutMessage();
    }
  },

  showSessionTimingOutMessage: function () {
    this.sessionTimingOutMessageShown = true;
    Events.trigger(Events.global.showFullPageModal, this.template);
  },

  extendSession: function () {
    this.sessionTimeingOutMessageShown = false;
    Events.trigger(Events.global.hideFullPageModal);
    $.ajax({
      url: '/heartbeat',
      type: 'HEAD'
    }).done(this.setSessionTimeout);
  }
});

timeout.js

var to = moment(new Date()).add(2, 'm'),
    messageShown = false;

// check once a second to see if we've timed out or are about to timeout
var intervalId = setInterval(function () {
	var now = moment(new Date()),
      timeDiffInSeconds = to.diff(now) / 1000;
    
  console.log('timeDiffInSeconds', timeDiffInSeconds);
	if (to.isSameOrBefore(now)) {
    // here we could redirect to a login page.
    console.log('timed out');
    clearInterval(intervalId);
  }
  
  if (timeDiffInSeconds <= 60 && !messageShown) {
    // here we can display a message to the user that their session is about to timeout
  	messageShown = true;
    console.log('about to timeout');      
  }
}, 1000);