Функция работает, как и ожидалось, когда вызывается из функции с использованием XMLHttpRequest, но завершается ошибкой, когда вызывается из функции с использованием EventSource.Почему это?

Question

Я не могу найти похожий вопрос, который решает мою проблему.Я работаю над созданием базового мессенджера с использованием Javascript.У меня есть три функции в отдельном js-файле с именами loadMessage, messageListener и displayMessage.

Функция loadMessage вызывает мою базу данных для всех существующих сообщений, а затем вызывает displayMessages для создания некоторых элементов div, которые я использую для отображения сообщений, полученных с сервера.Эти элементы создаются так, чтобы они появлялись друг под другом, а нижний элемент - это недавно созданный элемент, отображающий последнее сообщение.

После того, как все сообщения созданы, loadMessage затем вызывает messageListener.Эта функция «прослушивает» любые новые сообщения, которые могут появиться в базе данных.Если они появляются, 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

Проблема возникла из-за даты, возвращаемой как ymd, и синтаксического анализатора, использующего "-".Это означает, что я создавал переменную времени, которая была месяцем моей даты, а идентификатор сообщения - днем.Я сделал изменения ниже, чтобы исправить это ...

  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];