How to Show Online Users in MVC Like Face Book 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.

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() {


          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) {



                  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


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;



       // Then fetch the users from onlineusers table

   // Now pass the list to jquery using json

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



Build smarter apps with Machine Learning, Bots, Cognitive Services - Start free.

Start Learning Now