Tippindikatoren hinzufügen

Um die Anwendung ein wenig zu verfeinern, werden Sie Ihre Benutzer wissen lassen, wann die anderen Gesprächsteilnehmer tippen.

Fügen Sie den folgenden Code an das Ende der Datei run Funktion. Wenn Ihre Anwendung die keypress auf den Nachrichtentextbereich, rufen Sie die conversation.startTyping Funktion, um Ihre Anwendung darauf hinzuweisen, dass der Benutzer gerade tippt.

Wenn Sie die keyup Ereignis auf dem Textbereich länger als eine halbe Sekunde, können Sie davon ausgehen, dass der Benutzer aufgehört hat zu tippen und die conversation.stopTyping um auf Ihre Bewerbung aufmerksam zu machen.

messageTextarea.addEventListener('keypress', (event) => {
  conversation.startTyping();
});

var timeout = null;
messageTextarea.addEventListener('keyup', (event) => {
  clearTimeout(timeout);
  timeout = setTimeout(() => {
    conversation.stopTyping();
  }, 500);
});

Wenn Ihre Anwendung feststellt, dass ein Benutzer mit dem Tippen begonnen oder aufgehört hat, können Sie feststellen, von welchem Benutzer das Ereignis stammt. Handelt es sich um einen anderen Benutzer als die Person, die Ihre Anwendung verwendet, aktualisieren Sie deren Status in der Anwendung.

Fügen Sie Folgendes am Ende Ihrer run Funktion:

conversation.on("text:typing:on", (data, event) => {
  if (conversation.me.id !== data.memberId) {
    status.innerText = data.userName + " is typing...";
  }
});

conversation.on("text:typing:off", (data) => {
  status.innerText = "";
});