How to show the online users in MVC like facebook using JQuery?
Follow the given below steps:
- 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.
- Second Step: Create one table for the online users, which will have 4 columns uniqueUserID, StartTime, EndTime.
- Then insert/update a record into the OnlineUsers table for every 30 seconds using Jquery.
- If a new user login into the site then insert a record into OnlineUsersTable
- If the user already exists then update the endTime for every 30 seconds.
- If any user's endTime exceeds more than 2 mins then delete that user.
- 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);
}