当使用 XMLHttpRequest 从函数调用时，函数按预期工作，但当从使用 EventSource 的函数调用时失败。为什么是这样？

Question

我正在使用 Javascript 创建一个基本的 Messenger。我在一个名为 loadMessage、messageListener 和 displayMessage 的单独 js 文件中有三个函数。

函数 loadMessage 调用我的数据库以获取所有现有消息，然后调用 displayMessages 构建一些 div 用于显示我从中获取的消息服务器。这些 div 被创建为显示在彼此下方，底部 div 是新创建的显示最新消息的。

创建所有消息后 loadMessage 然后调用 messageListener。此函数 'listens' 适用于可能出现在数据库中的任何新消息。如果出现，则 messageListener 调用 displayMessage。我希望这会像以前一样在我的其他 div 的底部创建一个新的 div，但是当它调用 displayMessage 时，行为与 loadMessage 调用 displayMessage。

具体来说，它不会创建新的 div，而只是更改现有 div 中出现在新创建的 div 中任何位置的文本（例如， div 显示第一条消息或中间某处的消息）。

我的 HTML 和 PHP 文件都按预期运行，所以我认为我的问题出在这三个函数中。

我怎样才能解决这个问题以使其按预期运行？

代码：

 // Loads chat messages history and listens for upcoming ones.
function loadMessages(userID, contactID) {
    contactIDGlobal = contactID;
    //load existing messages
    var today = new Date();
    var date = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+today.getDate();
    var param = "userID="+userID+"&contactID="+contactID+"&date="+date;

    xmlhttp = new XMLHttpRequest();
    xmlhttp.open("POST","Interface-getMessage.php?", true);
    xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    xmlhttp.send(param);
    xmlhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    //retrives a string of all past messages
    var messageString = xmlhttp.responseText;
    //parse string to get messages. 
    var parseMessageString = messageString.split('-');
    for (var i = 0; parseMessageString[i] !== null && parseMessageString[i] !== ''; i = i+5){
      var contactID = parseMessageString[i];
      var senderID = parseMessageString[i+1];
      var message = parseMessageString[i+2];
      var time = parseMessageString[i+3];
      var mID = parseMessageString[i+4];
      displayMessage(userID, senderID, contactID, message, date, time, mID);
    }
  }
};
//listen for new messages
    messageListener(userID, contactID);   
}


function messageListener(userID, contactID){
    if(typeof(EventSource)!=="underfined") {
        var newMessage = new EventSource("testerfile.php?userID="+userID+"&contactID="+contactID);
        newMessage.onmessage = function(event) {
          var newMessageData = event.data;
          var parseNewMessage = newMessageData.split('-');
          //sender ID may be different to the userID due to the way that messages are stored on the server. Received messages have a different sender.
          var senderID = parseNewMessage[0];
          var contactID = parseNewMessage[1];
          var message = parseNewMessage[2];
          var date = parseNewMessage[3];
          var time = parseNewMessage[4];
          var messageID = parseNewMessage[5];

          console.log(event.data);
          displayMessage(userID, senderID, contactID, message, date, time, messageID);      
        };
    }else {
        document.getElementById("messages").innerHTML = "Your browser does not support this";
    } 

    }

// Displays a Message in the UI.
function displayMessage(userID, senderID, contactID, nMessage, date, time, id){
  var messageListElement = document.getElementById('messages');
  var messageInputElement = document.getElementById('message');
  // If an element for this message already exists, then get it
  var id = id;
  var div = document.getElementById(id);
  // If an element for that message does not exists yet we create it.
  if (!div) {
    var container = document.createElement('div');
    if (userID == senderID){
      container.innerHTML = SENDER_MESSAGE_TEMPLATE;
    }else{
      container.innerHTML = MESSAGE_TEMPLATE;
      }
    div = container.firstChild;
    div.setAttribute('id', id);
    for (var i = 0; i < messageListElement.children.length; i++) {
      var child = messageListElement.children[i];
    }
    messageListElement.insertBefore(div, child);
  }
  var messageElement = div.querySelector('.message');
  messageElement.textContent = nMessage;
  // Replace all line breaks by <br>.
  messageElement.innerHTML = messageElement.innerHTML.replace(/\n/g, '<br>');
}


// Template for messages.
var SENDER_MESSAGE_TEMPLATE =
    '<div class="sender_message-container">' +
      '<div class="message"></div>' +
    '</div>';

var MESSAGE_TEMPLATE =
    '<div class="message-container">' +
      '<div class="message"></div>' +
    '</div>';

Answer 1

问题出在以 y-m-d 形式返回的日期，以及使用“-”的解析器。这意味着我正在创建一个时间变量，它是我约会的月份，消息 ID 是一天。我做了下面的改动来解决这个问题...

  var newMessageData = event.data;
  var parseNewMessage = newMessageData.split('-');
  //sender ID may be different to the userID due to the way that messages are stored on the server. Received messages have a different sender.
  var senderID = parseNewMessage[0];
  var contactID = parseNewMessage[1];
  var message = parseNewMessage[2];
  var date = parseNewMessage[3]+"-"+parseNewMessage[4]+"-"+parseNewMessage[5];
  var time = parseNewMessage[6];
  var messageID = parseNewMessage[7];

当使用 XMLHttpRequest 从函数调用时，函数按预期工作，但当从使用 EventSource 的函数调用时失败。为什么是这样？

Function works as expected when called from function using XMLHttpRequest, but fails when called from a function using EventSource. Why is this?

javascript

chat