JavaScript

Anzeigen der Nachrichtenhistorie

Sie möchten, dass Ihre Benutzer alle Nachrichten in der Konversation sehen können. Dies können Sie erreichen, indem Sie die Konversationsparameter getEvents Methode (zum Abrufen von Nachrichten, die vor dem Beginn der aktuellen Sitzung gesendet und empfangen wurden) und ihre message Ereignis (das Ihre Anwendung benachrichtigt, wenn ein Benutzer eine Nachricht sendet).

Wenn die Anzahl der Nachrichten größer ist als die Seitengröße der Anfrage, können Sie getNext() um die nächste Seite zu erhalten. Mehr Informationen über getNext() finden Sie in der Dokumentation. Diese Funktion wird aufgerufen, wenn Sie auf die Schaltfläche Vorherige Nachrichten laden klicken. Platzieren Sie diesen Code nach der loginForm Ereignis-Listener und vor dem run Funktion.

loadMessagesButton.addEventListener("click", async (event) => {
  // Get next page of events
  let nextEvents = await listedEvents.getNext();
  listMessages(nextEvents);
});

Ihre Anwendung kann die Details der Nachricht aus den an jeden Handler gesendeten Ereignisdaten abrufen und sie der Liste der Nachrichten hinzufügen.

Um die Nachrichten aufzulisten, erstellen wir eine listMessages Funktion, die eine Ereignisseite nimmt und einige Schritte ausführt.

Wenn die Ereignisseite Meldungen auf einer Folgeseite enthält, ist die Schaltfläche "Vorherige Meldungen laden" sichtbar. Um das zu tun, hasNext() wird aufgerufen und gibt einen booleschen Wert zurück, der davon abhängt, ob es eine weitere Seite mit Nachrichten gibt. Sie können mehr Informationen über hasNext() im Dokumentation.

Als Nächstes werden Sie die Ereignisse in einer Schleife durchgehen, sie formatieren und kombinieren und dann zur Nachrichtenliste hinzufügen.

Fügen Sie den folgenden Code am Ende von chat.js:

function listMessages(events) {
  let messages = '';

  // If there is a next page, display the Load Previous Messages button
  if (events.hasNext()){
    loadMessagesButton.style.display = "block";
  } else {
    loadMessagesButton.style.display = "none";
  }

  // Replace current with new page of events
  listedEvents = events;

  events.items.forEach(event => {
    const sender = { displayName: event._embedded.from_user.display_name, memberId: event.from, userName: event._embedded.from_user.name, userId: event._embedded.from_user.id };
    const formattedMessage = formatMessage(sender, event, conversation.me);
    messages = formattedMessage + messages;
  });

  // Update UI
  messageFeed.innerHTML = messages + messageFeed.innerHTML;
  messagesCountSpan.textContent = messagesCount;
  messageDateSpan.textContent = messageDate;
}

In diesem Beispiel werden Sie die Identität des Benutzers verwenden, um zwischen den von ihm gesendeten und den von anderen Benutzern empfangenen Nachrichten zu unterscheiden, indem Sie sie in einer anderen Farbe anzeigen lassen. Erstellen Sie eine formatMessage Funktion zu verwenden, indem Sie den folgenden Code am Ende von chat.js:

function formatMessage(sender, message, me) {
  const rawDate = new Date(Date.parse(message.timestamp));
  const options = { weekday: "long", year: "numeric", month: "long", day: "numeric", hour: "numeric", minute: "numeric", second: "numeric" };
  const formattedDate = rawDate.toLocaleDateString(undefined, options);
  let text = '';
  messagesCount++;
  messageDate = formattedDate;

  if (message.from !== me.id) {
    text = `<span style="color:red">${sender.userName.replace(/</g,"&lt;")} (${formattedDate}): <b>${message.body.text.replace(/</g,"&lt;")}</b></span>`;
  } else {
    text = `me (${formattedDate}): <b>${message.body.text.replace(/</g,"&lt;")}</b>`;
  }

  return text + "<br />";

}

Nachdem Sie nun eine Möglichkeit zur Anzeige von Nachrichten auf der Seite implementiert haben, fügen Sie Folgendes am Ende Ihrer run Funktion zum Laden historischer Nachrichten:

// Update the UI to show which user we are
document.getElementById("sessionName").textContent = conversation.me.user.name + "'s messages"

// Load events that happened before the page loaded
let initialEvents = await conversation.getEvents({ event_type: "message", page_size: 10, order:"desc" });
listMessages(initialEvents);

Schließlich müssen Sie einen Ereignis-Listener für alle neu eingehenden Nachrichten einrichten. Sie können dies tun, indem Sie auf die conversation.on('message') Ereignis. Dadurch wird auch die Anzahl der Nachrichten aktualisiert. Fügen Sie Folgendes am Ende der Datei run Funktion:

  // Any time there's a new message event, add it as a message
  conversation.on("message", (sender, event) => {
    const formattedMessage = formatMessage(sender, event, conversation.me);
    messageFeed.innerHTML = messageFeed.innerHTML +  formattedMessage;
    messagesCountSpan.textContent = messagesCount;
  });