Práctica 3 - mdelaosa/2020-2021-LTAW-Practicas GitHub Wiki

Práctica 3

Índice

Documentación

Descripción

En esta práctica se ha realizado, de una manera sencilla, un chat que tiene tanto back-end como front-end. En primer lugar, es necesario que visites este link en el que se encuentran todos los archivos para visualizar este proyecto. La carpeta S8 puede ser obviada, ya que lo importante está en la carpeta llamada public y en el archivo que se encuentran directamente en el link.

Para la realización del chat, El Chat del Pueblo, lugar en el que se comenta la información ocurrida en Marbella (Vice) se ha programado en Javascript, HTML y CSS.

Es necesario descargar los archivos que se encuentran en la carpeta P3, sin ser necesario descargar el resto de carpetas internas, a excepción de la llamada "public", que si habrá que descargarla. Después, habrá que lanzar el servidor mediante el comando node tienda.js, que escucha de manera predefinida en el puerto 9000, para ver lo que ocurre, será necesario poner en el navegador http://localhost:9000/index.html. En el caso de que se pruebe con http://localhost:9000/ aparecerá un link que permitirá acceder al chat.

El proyecto tiene las imágenes de manera online, el único archivo que toma en local es el audio que suena cuando se envía un mensaje.

Código

  • En primer lugar es necesario indicar que durante esta práctica es necesario tener implementados los siguientes paquetes de npm:

    • npm i express
    • npm i socket.io

  • Para el funcionamiento será necesario escribir en el terminal node chat-server.js.

  • En el navegador hay que poner http://localhost:9000/chat.html o en su defecto http://127.0.0.1:9000/chat.html que será lanzado en el puerto donde escucha el servidor, que en este caso se trata del 9000. Con esto se podrán lanzar tantos clientes como se quieran y se podrá escribir. Las funciones destacables son:

    • El chat saluda a quien entra.
    • El chat indica si alguien escribe.
    • Suena un sonido cuando se envía un mensaje, que puede ser enviado con el botón creado de enviar o mediante la tecla intro.
    • /help -> informa de los comandos que se pueden probar
    • /list -> número de usuarios conectados
    • /hello -> el servidor saluda
    • /date -> da la fecha y hora que se tiene en ese momento
    • Si es usado cualquier otro comando precedido por / dará un error en el chat.

Los archivos que se tienen en la práctica son:

  • public que es una carpeta donde se encuentran:
    • chat-client.js -> fichero que crea el usuario del chat
    • index.html -> fichero con la información html del chat
    • style.css -> estilo creado para el archivo index.html
    • click.mp3 -> sonido para los mensajes
    • Imagenes -> carpeta con las imágenes utilizadas en la práctica
  • chat-server.js -> programa principal

Mejoras

La mejora implementada ha sido que cuando se envía un mensaje, ya sea con el botón de enviar o pulsando el botón de intro, sonará un pequeño sonido gracias a la función audio.play() que se encuentra en chat-server.js, además se ha conseguido que el chat indique cuándo escribe un usuario solo por primera vez. Además, avisa de que hay otra persona escribiendo. Respecto al front-end se ha implementado una mejora en las barras de scroll, que es apreciable desde el navegador de Chrome, así como el resto de visuales.

Visual

A continuación se muestra con un gif el funcionamiento de esta práctica.

Los comandos que se pueden ver en el chat se muestran como aparece en el siguiente gif.

Si hubiera algún fallo en la carga de la página, solo será necesario hacer f5

Licencia

Imágenes de títulos Resto documentación
Todos los derechos reservados Creative Commons by SA

Créditos