刷新内容而不刷新页面

Question

您好，我已经使用 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+'\')">' );
}}

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

Answer 1

您的问题是您删除了用户名中的所有内容，然后您写入了所有联系人。您最好从 $('#usernames') 中删除离线联系人，然后将在线联系人添加到该列表中。我编写了一些函数来向您展示其功能。我创建了在线联系人的 html 列表，还创建了一系列新的在线联系人。这是代码：

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