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

5 minuto(s)

Demo

Hay aplicaciones de mensajería en donde los usuarios que participan en una chat, suelen ver el mensaje por ejemplo “Pedro esta escribiendo…”, este mensaje le indica al otro usuario que espere atento hasta que el usuario mande su mensaje en la ventana o aplicación de mensajería, tenemos aplicaciones como Messenger o WhatsApp que tienen esta funcionalidad, en este Post te enseñare como hacerlo para un Chat en Navegador web, vamos con ello.

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: “Donde buscar ayuda sobre Programación”:

Spotify SoundCloud

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 1.

Al Chat le puedes agregar las funcionalidades que desees, yo le agregaré determinadas funcionalidades para este tutorial.

Nuevo Proyecto con Node JS

Lo primero que haré es crear un nuevo proyecto con Node JS, para esto ejecuto el siguiente comando.


Luego de ejecutar el comando anterior, Node JS, nos pedirá llenar algunos datos que irán en el archivo package.json del proyecto, yo le he puesto los siguientes datos.


Ahora voy a instalar las siguientes dependencias, que son necesarias para que mi proyecto funcione correctamente, las versiones de estas dependencias son las actuales hasta la fecha de este tutorial, pero en el futuro aparecerán nuevas versiones.


Entonces mi archivo package.json se debe de ver ahora así.


Paso seguido, creo un archivo llamado server.js en donde escribiré el código para mi servidor de Node JS, comenzaré creando las siguientes variables para instanciar las dependencias que instale anteriormente.


Luego le paso las dependencias express y bodyParser a mi aplicación.


Creo o declaro las siguientes variables con valores de tipo array.


Ahora hago referencia al archivo index.html que es el archivo en donde mostraré la interface del chat.


Ahora voy a definir la ruta /enviar_mensaje la cual servirá para enviar los mensajes en el chat con el método post() de Node JS, estos mensajes los enviaremos en tiempo real con el método .emit() de Socket IO a todas las ventanas de chat que se hayan abierto.


También defino una ruta llamada /mensajes para obtener los mensajes con el método get() de Node JS


Ahora cuando el usuario ingrese al Chat, este escribe su nombre de usuario, el servidor configura y guarda ese nombre de usuario y le permite enviar mensajes al chat.


Por último iniciamos el servidor en el puerto 3000, con toda la configuración que realizada anteriormente.


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


Bien hasta aquí esta primera parte, en donde creamos un nuevo proyecto en Node JS, instalamos las dependencias necesarias para el proyecto y creamos el servidor Node JS.

Ten Paciencia, lo que quiero es que entiendas todo el proceso para Crear este Proyecto y no llenarte el capitulo de mucho contenido porque te puedes marear y no tendrás un óptimo aprendizaje. 

Nota (s)

  • En el siguiente capitulo crearemos las funcionalidades del Chat y la vista HTML respectiva.
  • 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.