Question

你好我用socket.io，expressjs和mongoose开发了聊天应用程序，它运行正常。它会在几秒钟后刷新并从db中获取新客户端（如果存在）。问题是用户可以感觉div正在刷新。还有一段时间需要soem时间作为响应。如何避免这种情况。这是我的代码 这是我的服务器端代码

  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/

刷新内容而不刷新页面

1 个答案: