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

Práctica 4

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

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.

Habrá que lanzar el servidor mediante el comando npm start, que escucha de manera predefinida en el puerto 9000, para ver lo que ocurre, será necesario poner en el navegador http://localhost:9000/chat.html.

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, puesto que está basado en la P3.

Código

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

    • npm i websocket
    • npm i express
    • npm i socket.io
    • npm i ip
    • npm i process
    • npm i electron

  • Para el funcionamiento será necesario escribir en el terminal npm start, lo que abrirá la aplicación de Electron, donde se muestra el número de usuarios conectados, un botón de test para hacer pruebas, los mensajes que se tienen y una información relevante:

    • Versión de Node
    • Versión de Electron
    • Versión de Chrome
    • Directorio en el que se encuentran los archivos
    • IP

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

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

  • node_module -> donde se encuentran los módulos de node mencionados anteriormente
  • public que es una carpeta donde se encuentran:
    • chat-client.js -> fichero que crea el usuario del chat
    • chat.html -> fichero con la información html del chat
    • chat-style.css -> estilo creado para el archivo chat.html
    • click.mp3 -> sonido para los mensajes
    • Imagenes -> carpeta con las imágenes utilizadas en la práctica
  • main.js -> programa principal
  • index.html -> fichero html con el chat Electron
  • index.js -> fichero js con el chat Electron
  • style.css -> estilo creado para index.html
  • package-lock.json & package.json -> dependencias del programa

Mejoras

Al igual que en la P3, 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. 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 primero la imagen de Electron, después el usuario 1 y por último el usuario 2.

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