Cómo ver lo que está escribiendo un usuario en una aplicación de chat de Android

“Clemente está escribiendo …”

¿Alguna vez has estado mirando la pantalla de tu teléfono móvil esperando la respuesta de la otra persona mientras está escribiendo …

Con el aumento del chat instantáneo, vemos esto a diario en una plataforma u otra. El indicador de mecanografía le hace saber que la otra persona está respondiendo a su mensaje.

Estás a 3 pasos para implementar el indicador de escritura en tu aplicación de chat y están a continuación:

  1. Adjunte un oyente de cambio de texto a la vista de texto.
  2. Publicar y suscribir el estado de escritura del usuario
  3. Actualizar el estado de escritura en tiempo real en la interfaz de usuario

Paso 1: Adjunte un oyente de cambio de texto

Se llama al método afterTextChanged de TextWatcher para notificarle que, en algún lugar dentro de EditText, el texto ha cambiado.

Si se cambia el texto y

  • la longitud es 1, lo que significa que se comienza a escribir,
  • la longitud es 0 significa que la escritura está detenida.

Código de Android de muestra:

messageEditText.addTextChangedListener (new TextWatcher () {

public void beforeTextChanged (CharSequence s, int start, int count, int after) {

}

public void onTextChanged (CharSequence s, int start, int before, int count) {

}

public void afterTextChanged (Editable s) {

if (! TextUtils.isEmpty (s.toString ()) && s.toString (). trim (). length () == 1) {

//Log.i(TAG, “escribiendo evento iniciado …”);

typingStarted = true;

// enviar estado de inicio de escritura

} else if (s.toString (). trim (). length () == 0 && typingStarted) {

//Log.i(TAG, “escribiendo evento detenido …”);

typingStarted = false;

// enviar estado de detención de escritura

}

}

});

Fuente: Github Applozic Android Chat SDK

El estado de vinculación debe detenerse en algunos otros casos como:

i) Si la aplicación pasa a segundo plano,

ii) EditText pierde el foco, o

iii) La longitud del texto escrito permanece igual durante algún tiempo.


Paso 2: publique y suscriba el estado de escritura del usuario

Es hora de enviar y recibir el estado de escritura al otro dispositivo. Esto se puede implementar utilizando el patrón de publicación-suscripción. Comprendamos qué es el patrón de publicación-suscripción.

publicar-suscribir es un patrón de mensajería donde los remitentes de mensajes , llamados editores, no programan los mensajes que se enviarán directamente a receptores específicos, llamados suscriptores, sino que caracterizan los mensajes publicados en clases sin saber qué suscriptores, si los hay, pueden haber . Del mismo modo, los suscriptores expresan interés en una o más clases y solo reciben mensajes que son de interés, sin saber qué editores, si los hay, existen.

Fuente: Wikipedia

Ahora, todo lo que tenemos que hacer es:

Suscriba la aplicación del usuario A a un tema “/ topic / user-a”, la aplicación del usuario B a un tema “/ topic / user-b” y publique el estado de escritura en el tema del receptor.

Usuario A

Usuario B

Suscribir

/ topic / user-a

/ topic / user-b

Publicar

/ topic / user-b

/ topic / user-a

Mecanografía comenzó

1

1

Mecanografía detenida

0 0

0 0

Para enviar datos de un dispositivo a otro en tiempo real, necesitaremos una conexión basada en socket. Hay muchas opciones disponibles como Socket.io, Mosquitto.org, RabbitMQ.

Para este tutorial, usaremos RabbitMQ.

Ejecute el adaptador RabbitMQ MQTT en su servidor.

En Android, use la biblioteca eclipse paho para crear un cliente mqtt.

org.eclipse.paho.android.service – 1.0.2.jar

org.eclipse.paho.client.mqttv3-1.0.2.jar

Las 2 versiones anteriores para el cliente Android eclipse paho se pueden encontrar aquí: https://github.com/AppLozic/Appl…

Código de Android para publicar datos:

Cliente MqttClient = nuevo MqttClient (MQTT_URL, userId + “-“ + new Date (). GetTime (), new MemoryPersistence ());

Mensaje MqttMessage = nuevo MqttMessage ();

message.setRetained ( falso );

message.setPayload ( typingStatus ) .getBytes ());

message.setQos (0);

client.publish ( “tema /” + ID de usuario, mensaje);

client.subscribe ( “tema /” + usuarioB, 0);

Fuente: Github Applozic Android Chat SDK


Paso 3: actualice el estado de escritura en tiempo real en la interfaz de usuario

Al final del receptor, al recibir el estado de escritura, muestre y oculte el indicador de escritura en consecuencia.

A continuación se muestra el código de Android para recibir el estado de escritura

@Anular

public void messageArrived (String s, final MqttMessage mqttMessage) genera una excepción {

Iniciar sesión. i ( TAG , “Mensaje MQTT recibido:” + nueva cadena (mqttMessage.getPayload ()));

if (! TextUtils. isEmpty (s) && s.startsWith ( TYPINGTOPIC )) {

Cadena typingResponse = mqttMessage.toString ();

// Transmite el estado de escritura a la actividad / fragmento actual y muestra la etiqueta de escritura.

}

}


Enlaces más ingeniosos:

Encuentra el código del indicador de escritura en el sdk de chat de código abierto de Applozic disponible en github.

https://github.com/AppLozic/Appl… para Android Chat SDK ligero

https://github.com/AppLozic/Appl… para SDK de chat de iOS ligero

Para iOS, puede usar MQTT Client Framework para enviar y recibir datos desde dispositivos.

Referencia:

http://www.slate.com/articles/te…


¿Estás desarrollando chat para tu aplicación de Android?

Agregue chat y mensajes en tiempo real a su aplicación en 10 minutos con Applozic