1

こんにちは、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);

ここにnotify allメソッドがあります

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

私もこの質問を投稿しましたが、答えはありません

4

1 に答える 1

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/

于 2013-01-17T10:10:12.143 に答える