Refresh the content without page refresh - node.js

Question

hello i have developed the chat application using socket.io, expressjs and mongoose it works fine. it refreshes after some seconds and fetches new clients from db if exist. problem is that user can feel that div is refreshsing.and also some time take soem time in response. how to avoid this case. here is my code
This is my server side code
setInterval(function () {
var allOnLine;
allOnLine = io.sockets.clients();
for (var client in allOnLine) {
if (allOnLine[client].username == "undefined") {
continue;
} else {
notifyAll(allOnLine[client].username);
}
}
}, 50000);
and here is notify all method
function notifyAll(userName) {
contactModel.find({'userId':userName}, (function (err, contactModel) {
usernames = [];
var contacts = contactModel;
for (var a = 0; a < contacts.length; a++) {
usernames[a] = contacts[a].contactId;
}
var allOnLine;
allOnLine = io.sockets.clients();
for (var client in allOnLine) {
if (allOnLine[client].username == "undefined") {
continue;
} else {
for (var i = 0; i < usernames.length; i++) {
if (allOnLine[client].username == usernames[i]) {
usernames[i] = usernames[i] + " -On";
}
allOnLine[client].username);
}
}
}
io.sockets.to(userName).emit('updateusers', usernames);
}));
}
This is my client code
socket.on('updateusers', function(usernames) {
jQuery('#usernames').html('');
jQuery.each(usernames, function(key, value) {
jQuery('#usernames').append('<div class="chatContact" id="chatLink" onclick="privateChat(\''+value+'\')">' );
}}
any help i had also posted this question but no answer

Answer 1

Your problem is that youdelete everything from usernames and after that you write all contacts. You would better remove the offline contacts from the $('#usernames') and after that to add to that list the online contacts. I writed some functions to show you the functionality. I created html list of online contacts and I also created an array of new online contacts. Here is the code:
<div id="u">
<div class="d" onclick="chat('asd1')">asd1</div>
<div class="d" onclick="chat('asd12')">asd12</div>
<div class="d" onclick="chat('asd13')">asd13</div>
<div class="d" onclick="chat('asd142')">asd14</div>
</div>
Here you have the javascript that you need to run after the DOM is ready:
var onlineUsernames = ["asd211","asd12","asd13","asd14"];
var usernamesContainerID = 'u';
var $usernamesContainer = $('#'+usernamesContainerID);
function extractUsernameFromAttr(onclickValue)
{
return onclickValue.split("'")[1];
}
function buildExistingUsernames($userDivs)
{
var existingUsernames = [];
$userDivs.each(function(index,value){
var username = extractUsernameFromAttr($userDivs[index].getAttribute('onclick'));
existingUsernames.push(username);
})
return existingUsernames;
}
function removeUserFromList($user)
{
document.getElementById(usernamesContainerID).removeChild($user);
}
function addUserToList(value)
{
$('<div/>',{
onclick:"chat('"+value+"')",
class :'d',
text:value
}).appendTo($usernamesContainer);
}
function deleteOfflineContacts(existingUsernames,usernames,$userDivs)
{
$.each(existingUsernames,function(index,value)
{
if($.inArray(value,usernames)==-1)
{
removeUserFromList($userDivs[index]);
}
})
}
function addOnlineContacts(existingUsernames,usernames)
{
$.each(usernames,function(index,value)
{
if($.inArray(value,existingUsernames)==-1)
{
addUserToList(value);
}
})
}
function update($userDivs)
{
var existingUsernames = buildExistingUsernames($userDivs);
deleteOfflineContacts(existingUsernames,onlineUsernames,$userDivs);
addOnlineContacts(existingUsernames,onlineUsernames);
}
var $userDivs = $usernamesContainer.children("div");
setTimeout(function()
{
update($userDivs);
},3000);
If you need it here is a working example: http://jsfiddle.net/9gRyQ/2/