刷新内容而不刷新页面

你好我开发的聊天应用程序使用socket.io,expressjs和mongoose它工作正常。 它会刷新几秒钟,并从数据库中提取新的客户端,如果存在。 问题在于用户可以感觉到div是刷新的,而且有时候也会花时间来回应。 如何避免这种情况。 这里是我的代码这是我的服务器端代码

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

这里是通知所有的方法

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

这是我的客户端代码

 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+'\')">' ); }} 

任何帮助我也发布了这个问题,但没有答案

你的问题是,你删除了所有的用户名,然后你写所有的联系人。 您最好从$('#用户名')中删除脱机联系人,然后在联机联系人列表中添加联系人。 我写了一些函数来显示你的function。 我创build了在线联系人的html列表,并且还创build了一个新的在线联系人数组。 这里是代码:

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

在这里,您已经准备好DOM后需要运行的JavaScript:

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

如果你需要这里是一个工作的例子: http : //jsfiddle.net/9gRyQ/2/