Thursday, December 12, 2013

Display login screen in browser when session time out for a user using Web Socket

If you will notice the ColdFusion Administrator of CF10 then you can find that in some intervals of time it keeps refreshing. Though I am not sure why it is refreshing but I believe that refresh option is added just to take user to login screen when session time out occurs.

Let say you are using some chatting application and you have opened different chat window in different tabs and you logout from the application and you forgot to close other chat window tabs. The other chat tab which is opened may have some sensitive/private information which others can view. So, ideally we should view the login screen in all tabs once a user manually logs out or when the session timeout occurs.

We can show user login screen in all tabs when session timeout occurs/logs out by the user by using one of the following ways.
  1. Keeps refreshing our page in some intervals of time and when session times out then you will automatically redirect to login screen. But this may create issues like content reload unnecessarily. 
  2. Keep making AJAX call to server to verify login status in some intervals of time and reload the page whenever required. This is correct upto some extent okay but we have to make AJAX call in some intervals of time, i,e - some extra burden.
  3. Use Web Socket to achieve the functionality without refreshing the screen in some intervals of time.
For #1 and #2 time interval will be more than the session timeout time. 

I think #1 and #2 is not the optimized way of do that. So, lets see how we can achieve that using ColdFusion Web Socket  and I think this is one of the best method to achieve this.

Before I move ahead please download the application here.(Login Tracking By WebSocket.)

***NOTE: Attached code will work only in ColdFusion 10

Create a Web application in your computer using the above code and use any email ID and Nick name to login into the Application.

Code Description:
Code contains inline comments and I am describing the whole logic below.

How Does the Code Works:

We have defined a channel "Logout" in Application.cfc. Using this channel we can create no of sub channel of it in our application.

Logout.onLineUser - This channel no of currently online users in this application.
Logout.{email ID Login User} - This channel identifies whether a user is log in or log out from the system.

Step 1: (Login Page and Login Process)

- Display Login Screen to user if the user is not log in into the system.
- Take email ID and nick name to allow user to log in into the system and save the email ID in Application scope,
  a) so that other user can able to see online users of the Application at any time
  b) Make email validation, i.e :- Multiple login of same email ID is blocked at a time.
- Publish the online users into "Logout.onLineUser" channel.
- Redirect to index.cfm page.

Step 2:(index.cfm page and Display Online User)

- Load all online users from "Application.userInfo" variable.
- Initiate two channels: 1. Logout.onLineUser 2. Logout.{email ID} (Here we are removing "." and "@" from the email ID while creating sub channel)
- onLineResponseHandler : - In online user handler we will write the logic, if we are receiving data from user then display all the online user information received in UI.
- logoutResponseHandler: - In this response handler we will receive data if the user logout from the system. So, reload the page. As the session is undefined it will take you to the login screen.

Step 3:( Log out Functionality)

- In index.cfm we have added a logout link. If you click on that link then it will take you to logout.cfm and then it calls logoutUser method present in Utility.cfc.
- logoutUser() we are taking two parameter.
 1. Application scope.
 2. Login Info Structure from Session scope.

- We are deleting the user information from "Application.userInfo".
- We are clrearing the Session Scope and publishing login status of the user to
- Publish all available user information to "Logout.onLineUser" channel. So that all active users can see the online status at that instant.
- Publish login status of the currently logout user to  channel "Logout.{email ID}"  and in JS code after getting the status the page will be reloaded, as the session is already cleared then it will redirect to login page.

Step 4: Auto Log out by Session timeout

- When session time out wil happen then we are calling "logoutUser()" from onSessionEnd().
- In logoutUser() method we are just deleting the user information from Application.userInfo and publishing the logut status to reload the browser if that is opened.

Hope you have enjoyed!!!

No comments:

Post a Comment