Ajax 聊天消息重复而不只是更新

Question

现在正在做自己的聊天系统，东西（练习）。一切正常，只有一点点。当我输入一条新消息时，数据库中的所有消息都会再次添加，而不仅仅是更新现有日志。

例如日志：

9th-Apr dunkirk: come a bit closer  16:57

然后我会添加另一条消息说太远了！它会更新，但会重复这样的：

9th-Apr dunkirk: come a bit closer  16:57
9th-Apr dunkirk: come a bit closer  16:57 <--repeating everything again
9th-Apr dunkirk: TOO FAR!   16:58

有相当多的代码，所以我只包括有问题的部分（据我所知）：

function updateMessages(){
    if (xmlhttp.readyState==4) {
        if (xmlhttp.status==200) {
            try{
                xmlText = xmlhttp.responseXML;
                messages = xmlText.getElementsByTagName('messages');
                for (var i = 0; i < messages.length; i++) {
                    time = '<td>'+messages[i].getElementsByTagName('time')[0].innerHTML+'</td>';
                    date = '<td>'+messages[i].getElementsByTagName('date')[0].innerHTML+'</td>';
                    username = '<td>'+messages[i].getElementsByTagName('username')[0].innerHTML+'</td>';
                    message = '<td>'+messages[i].getElementsByTagName('message')[0].innerHTML+'</td>';
                    text = date+username+message+time;

                    tr = document.createElement('tr');      
                    tr.innerHTML = text;
                    document.getElementById('chatMessages').appendChild(tr);
                };
            }catch(e){
                console.log(e);
            }
        }
    };
}

我希望它显示所有消息，不重复，但在遇到新消息时仍会更新，就像大多数聊天一样。

我之前在注册系统中遇到过类似的问题，我用 while 循环修复了该问题，但该修复在本例中似乎不起作用。之前的修复是：

        while (update.firstChild) {
            update.removeChild(update.firstChild);
        }

检查parent是否有child，如果没有继续，如果有，删除child。

我确信关于初始文本创建的解决方案非常简单，但你可能会说我对此很陌生。

Answer 1

我假设您在 html 代码中有 table 元素。假设它的 id 是 chatTable.

在 for 循环之前添加以下内容

document.getElementById("chatTable").innerHTML = "";

我认为这应该可行。

Answer 2

您似乎总是将整个聊天记录附加到您的消息中，而不仅仅是那些新消息。因此，您需要记录您看到的消息，并且只插入尚未添加的新消息。

// at the start of your script
var chatLog = {};

// --- SNIP ---

for (var i = 0; i < messages.length; i++) {
  time = '<td>' + messages[i].getElementsByTagName('time')[0].innerHTML + '</td>';
  date = '<td>' + messages[i].getElementsByTagName('date')[0].innerHTML + '</td>';
  username = '<td>' + messages[i].getElementsByTagName('username')[0].innerHTML + '</td>';
  message = '<td>' + messages[i].getElementsByTagName('message')[0].innerHTML + '</td>';
  text = date + username + message + time;

  if (!chatLog[text]) {
    continue; // don't add the message to the chat as it already exists
  }

  tr = document.createElement('tr');
  tr.innerHTML = text;
  document.getElementById('chatMessages').appendChild(tr);
  chatLog[text] = true; // mark that we've already added this message
};

您也可以在添加消息之前始终清除 table，但这样可以避免不必要的 DOM 插入（以多一点内存为代价）。

Ajax 聊天消息重复而不只是更新

Ajax chat messages repeating rather than just updating

javascript

ajax

chat