How to Show Online Users in MVC Like Face Book using JQuery

This blog shows the online users in MVC like facebook using JQuery.

How to show the online users in MVC like facebook using JQuery?

Follow the given below steps:

1. First Step:  Show all your friends in your right side panel like facebook. Then we will find who are online using the below given steps.
2. Second Step:  Create one table for the online users, which will have 4 columns uniqueUserID, StartTime, EndTime.
3. Then insert/update a record into the OnlineUsers table for every 30 seconds using Jquery.
4. If a new user login into the site then insert a record into OnlineUsersTable
5. If the user already exists then update the endTime for every 30 seconds.
6. If any user's endTime exceeds more than 2 mins then delete that user.
7. At last fetch the remaining online users.

jQuery
 
In the given below sample I am removing css for all the users, then applying css for the online users only. Blue indicates as online, red indicates as offline.

function chatHeartbeatForOnlineUsers() {

      $.ajax({

          url: "/chat/GetOnlineUsers",

          type: 'POST',

          dataType: 'json',

          //data: { userId: userId},

          success: function (response) {

              var data = JSON.parse(response);

              if (data != null) {

                  $(".blue").each(function (i, val) {

                      $(this).removeClass("blue").addClass("red");

                  });

                  for (var i = 0; i < data.length; i++) {

                      var username = data[i].username;

                      $("#" + username + data[i].userid).removeClass('red');

                      $("#" + username + data[i].userid).addClass('blue');

                  }

              }

              setTimeout('chatHeartbeatForOnlineUsers();', '10000');

          }

      });

  }

  
Controller Code

[HttpPost]

public JsonResult GetOnlineUsers()

{

// If new user insert record into onlineusers table

//If user already exists update endtime with current time

//Delete the user like below

    var remove = from user in OnlineUsers

          where user.endtime < System.DateTime.Now.AddMinutes(-2)

          select user;

          userContext.tblOnlineUsers.DeleteAllOnSubmit(remove);

          userContext.SubmitChanges();

       // Then fetch the users from onlineusers table

   // Now pass the list to jquery using json

   return Json(new JavaScriptSerializer().Serialize(onlineUsersList), JsonRequestBehavior.AllowGet);

 }