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.

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

 }

X

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

Start Learning Now