Mostrando el Mensaje de “Usuario esta escribiendo…” en un Chat con Node JS 14.5.0 (Socket IO 2.3.0) – Parte 2 (Final)

7 minuto(s)

Demo Github

En este Post continuaremos con la parte anterior llamada Mostrando el Mensaje de “Usuario esta escribiendo…” en un Chat con Node JS 14.5.0 (Socket IO 2.3.0) – Parte 1, en donde creamos un nuevo proyecto, instalamos las dependencias necesarias para que el proyecto funcione correctamente y creamos el servidor en Node JS, en esta segunda y última parte vamos a crear las funcionalidades del Chat y la vista o interface HTML.

Partes

  • Parte 1 
  • Parte 2 (Final – Código Fuente GitHub) 

Antes de continuar con este Post, te invito a leer los siguientes artículos:

Asimismo te invito a escuchar el Podcast: “Que Hacer Cuando Estamos En Casa” :

Spotify: Sound Cloud:

Bien ahora continuemos con el Post: Mostrando el Mensaje de “Usuario esta escribiendo…” en un Chat con Node JS 14.5.0 (Socket IO 2.3.0) – Parte 2 (Final).

Vamos a crear las funcionalidades que para el chat, para esto creo un nuevo archivo llamada chat.js en el mismo directorio en donde se encuentra los demás archivos de mi proyecto.


Abro el archivo chat.js y declaro las siguientes variables.


Luego creo el método configurarNombreUsuario() el cual usaré para configurar los nombres de los usuarios en el chat.


Paso seguido creo una función jQuery con el método .ready() en donde realizaré determinada funcionalidades.


Lo primero que haré es detectar si el usuario presionó la tecla ENTER luego de escribir su nombre y tras esto que llame al método configurarNombreUsuario().

Luego que el usuario crear su nombre de usuario, este ingresa a la sala del chat y le mostramos una caja de texto en donde escribirá los mensajes y un botón para enviar los mensajes.

Paso seguido con el método keypress(), de jQuery detectamos que el usuario este escribiendo un mensaje y preparamos el texto “Usuario esta escribiendo…” que será mostrado al usuario que se encuentra en otra ventana del chat.

Entonces al usuario que tiene la ventana activa, el cual esta escribiendo un mensaje, le ocultamos el texto “Usuario esta escribiendo…” y mas bien se lo mostramos al usuario que se encuentra en la otra ventana del chat.


Luego obtenemos los mensajes en tiempo real en el chat.


Cuando un usuario deja de escribir, ocultamos el texto “Usuario esta escribiendo…”


Creo un método con el nombre obtenerMensajes() para mostrar los mensajes en tiempo real en el chat, es decir muestro el nombre del usuario y su mensaje en la ventana del chat, asimismo hago que el scroll siempre este activo en el último mensaje enviado a la ventana del Chat, esto lo hago con los métodos .animate(), scrollTop() y .height() de jQuery.


Por último creo un método que envíe los mensajes en tiempo real al Chat, usando la ruta /enviar_mensaje


A continuación el código completo del archivo chat.js

Vista o interface del Chat

Ahora voy a crear un archivo HTML con el nombre index.html en donde crearé los elementos visuales del chat.


Abro el archivo index.html y agrego los siguiente elementos (He colocado comentarios en el código HTML explicando para que sirve cada elemento).


Antes de la etiqueta de cierre </body> instancio a mi archivo chat.js y a Socket IO


Entonces si ejecuto mi servidor con el siguiente comando.


Y abro la dirección local http://localhost:3000/ en el navegador, debo de ver el chat funcionando sin problemas. (He cambiado el ancho de la ventana del navegador, pero si le das el tamaño normal a la ventana del navegador, igual debe funcionar). 

Bueno eso es todo, al inicio de cada parte del tutorial he colocado una Demo para que veas el proyecto en acción, asimismo he colocado el código fuente alojado en GitHub en esta última parte del tutorial. 

Nota (s)

  • El código, los Pasos y opciones mencionadas en este tutorial pueden cambiar, esto no depende de nosotros, si no de las empresas u organizaciones que dan soporte a Node JS y JavaScript, que suele cambiar sus opciones de despliegue y configuración en futuras versiones.
  • No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo. 

 

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.