JavaScript

Añadir indicadores de mecanografía

Para que la aplicación esté un poco más pulida, permitirá a los usuarios saber cuándo están escribiendo las otras partes de la conversación.

Añade el siguiente código al final del archivo run función. Si su aplicación detecta la keypress en el área de texto del mensaje, llama al evento conversation.startTyping para avisar a su aplicación de que el usuario está escribiendo.

Si detecta el keyup en el área de texto durante más de medio segundo, puede suponer que el usuario ha dejado de escribir y llamar a conversation.stopTyping para alertar de su solicitud.

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

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

Cuando tu aplicación detecta que un usuario ha empezado o dejado de escribir, puedes determinar de qué usuario procede el evento. Si el usuario no es la persona que utiliza tu aplicación, actualiza su estado en la aplicación.

Añada lo siguiente al final de su run función:

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 = "";
});