Cómo construir un chat sincronizado en tiempo real. Proyecto Parte #1

Última actualización: 6 abril, 2023

¿Qué vamos a construir?

Vamos a construir una app de chat con sincronización en tiempo real, es decir, si dos personas están chateando, lo que escriba una y le envíe a la otra podrá ser visto por la otra prácticamente en el mismo momento de haber enviado el mensaje. Además, como usuario también podrás unirte a distintos canales de chat.

Otra de las características será el poder cambiar tu nombre de usuario cuando quieras.

Consideraciones previas y pre-requesitos

Para poder seguir este proyecto sin ir más perdido/a que un pulpo en un garaje, deberás tener conocimientos de:

Estructura inicial del proyecto

📄 index.html
📂 scripts
     📄 app.js
     📄 ui.js
     📄 chat.js
📄 styles.css

En cuanto a los scripts, app.js se encargará de conectar ui.js y chat.js entre sí para poder lanzar nuestra app.

Vamos a configurar el index.html.

1. Añadimos los scripts al final, en este orden: chat.js, ui.js app.js.

2. Añadimos bootstrap y nuestro propio CSS.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="styles.css">
    <title>Live chat</title>
</head>
<body>
    
    <script src="scripts/chat.js"></script>
    <script src="scripts/ui.js"></script>
    <script src="scripts/app.js"></script>
</body>
</html>

Vamos a encargarnos ahora de crear nuestro esqueleto HTML en el <body>. 💀

4. Usamos un container gigante que abarque toda la página y añadimos comentarios en el HTML a modo aclaratorio. 

    <div class="container my-4">
        <h3 class="my-4 text-center">Live chat</h3>
        <!-- buttons for chatrooms -->
        <div class="chat-rooms mb-3 text-center">
            <div class="my-2">Choose a chatroom:</div>
            <button class="btn my-1" id="general">#general</button>
            <button class="btn my-1" id="foodies">#foodies</button>
            <button class="btn my-1" id="tv-shows">#TV shows</button>
            <button class="btn my-1" id="music">#music</button>
        </div>
        <!-- chat window / conversations -->
        <!-- new chat form (message) -->
        <!-- update name form -->
        
    </div>
   

En la sección de chat window es donde se mostrará una conversación entera, diferenciando quién ha dicho qué. Cada vez que un usuario escriba un mensaje y lo mande, lo colocaremos en un <li> dentro del <ul>. Pero eso no lo vamos a escribir de manera estática (en adelante, harcoded) sino dinámica en nuestro código JavaScript (en adelante, JS).

La sección new chat form será la parte donde el usuario escriba su mensaje y se envíe a la base de datos (en inglés, database) que vamos a crear después.

Utilizamos tanto clases de bootstrap como clases propias

Al final de la sección update name form tenemos un <div> que se encargará de darle al usuario un comentario sobre la acción que acabe de hacer.  Vamos, de darle feedback.

        <!-- chat window / conversations -->
        <div class="chat-window">
            <ul class="chat-list list-group"></ul>
        </div>
        <!-- new chat form (message) -->
        <form class="new-chat my-3">
            <div class="input-group">
                <div class="input-group-prepend">
                    <div class="input-group-text">Say something :</div>
                </div>
                <input type="text" id="message" class="form-control" required>
                <div class="input-group-append">
                    <input type="submit" class="btn" value="send">
                </div>
            </div>
        </form>
        <!-- update name form -->
        <form class="new-name my-3">
            <div class="input-group">
                <div class="input-group-prepend">
                    <div class="input-group-text">Update name:</div>
                </div>
                <input type="text" id="name" class="form-control" required>
                <div class="input-group-append">
                    <input type="submit" class="btn" value="update">
                </div>
            </div>
            <div class="update-message"></div>
        </form>

Nuestra app debería tener una pinta como esta:

live chat estado inicial

Vamos a darle un poco de vidilla con CSS, en el archivo styles.css. 👩‍🎨

.container {
    max-width: 750px;
}

.btn {
    background-color: rgb(11, 165, 192);
    color: #fff;
}

.btn:hover,
.btn:active {
    background-color: rgb(15, 132, 153);
    color: #fff;
    transition: all 0.2s;
}

.btn:focus {
    box-shadow: none;
}

🔐 CONTENIDO RESTRINGIDO

El resto del contenido es sólo para miembros del Club ACTech. Puedes unirte aquí o iniciar sesión si ya eres miembro.

THE END!

¡Y hasta aquí la primera parte de este proyecto de construcción de un chat en tiempo real! Espero que hayas aprendido algo nuevo 😊.  Si te queda alguna duda, ¡nos vemos en los comentarios!

Si quieres seguir aprendiendo, nos vemos en la parte #2.

Sobre la autora de este post

Soy Rocío, una abogada reconvertida en programadora. Soy una apasionada de aprender cosas nuevas y ferviente defensora de que la única manera de ser feliz es alcanzando un equilibrio entre lo que te encanta hacer y lo que te saque de pobre. Mi historia completa, aquí. 

Otros artículos que pueden interesarte

Cómo aprendí a programar cuando estaba «programada» para ser de letras
[tcb-script src="https://player.vimeo.com/api/player.js"][/tcb-script]A nadie le gusta su trabajo. Eso es lo que me decía a mí misma cuando conseguí mi primer[...]
Días del 160 al 203 – ¡Primer objetivo conseguido!
“A veces podemos pasarnos años sin vivir en absoluto, y de pronto toda nuestra vida se concentra en un solo[...]
Claves para entender Angular. Qué es y cómo se utiliza
Angular es un framework creado por Google que nos permite construir Single Page Applications (SPA, por sus siglas en inglés).Frameworks¿Pero qué es[...]
Si crees que este post puede serle útil a alguien, ¡compártelo!:

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Esta web utiliza cookies para asegurar que se da la mejor experiencia al usuario. Si continúas utilizando este sitio se asume que estás de acuerdo. más información

Los ajustes de cookies en esta web están configurados para «permitir las cookies» y ofrecerte la mejor experiencia de navegación posible. Si sigues usando esta web sin cambiar tus ajustes de cookies o haces clic en «Aceptar», estarás dando tu consentimiento a esto.

Cerrar