Programando la lógica del chat

Clase 24 de 26 • Curso de Aplicaciones en Tiempo Real con Socket.io

Yeison David Sanabria Ascanio

student•

Style.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, Helvetica, sans-serif;
}

header {
    background: #43a8f0;
    color: #fff;
    padding: 7px;
}

.button-container {
    display: flex;
    justify-content: center;
}

[type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled) {
    cursor: pointer;
}

.btn {
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    text-align: center;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 1rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    color: var(--btn-color);
    background-color: var(--btn-bg);
}

.btn:hover {
    color: var(--btn-hover-color);
    background-color: var(--btn-hover-bg);
    border-color: var(--btn-hover-border-color);
}

.btn:focus {
    color: var(--btn-hover-color);
    background-color: var(--btn-hover-bg);
    border-color: var(--btn-hover-border-color);
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(var(--btn-focus-shadow-rgb), .5);
}

.btn:active {
    color: var(--btn-active-color);
    background-color: var(--btn-active-bg);
    border-color: var(--btn-active-border-color);
}

.primary {
    --btn-color: #fff;
    --btn-bg: #43a8f0;
    --btn-border-color: #43a8f0;
    --btn-hover-color: #fff;
    --btn-hover-bg: #116bf0;
    --btn-hover-border-color: #0a58ca;
    --btn-focus-shadow-rgb: 49,132,253;
    --btn-active-color: #fff;
    --btn-active-bg: #0a58ca;
    --btn-active-border-color: #0a53be;
    --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --btn-disabled-color: #fff;
    --btn-disabled-bg: #0d6efd;
    --btn-disabled-border-color: #0d6efd;
}

.secondary {
    --btn-color: #fff;
    --btn-bg: #7C4DFF;
    --btn-border-color: #7C4DFF;
    --btn-hover-color: #fff;
    --btn-hover-bg: #8356fd;
    --btn-hover-border-color: #8356fd;
    --btn-focus-shadow-rgb: 131,83,256;
    --btn-active-color: #fff;
    --btn-active-bg: #8356fd;
    --btn-active-border-color: #8356fd;
    --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --btn-disabled-color: #fff;
    --btn-disabled-bg: #8356fd;
    --btn-disabled-border-color: #8356fd;
}

.input-group {
    display: flex;
    flex-direction: column;
}

input {
    border: 1px solid #ccc;
    outline: none;
    padding: 10px;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
}

.card {
    box-shadow: 0 0 4px 0 rgb(0 0 0 / 8%), 0 2px 4px 0 rgb(0 0 0 / 12%);
    border-radius: 3px;
    background: #fff;
}

.image-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.image-container img {
    display: inline-block;
    width: 100%;
}

chat.css

#all-messages {
    padding: 50px 25px;
}

.message {
    display: flex;
    margin-bottom: 20px;
}

.message .image-container {
    width: 50px;
    align-items: flex-start;
}

.message .message-body {
    margin-left: 10px;
    width: calc(100% - 50px)
}

.message .message-body .user-info {
    font-weight: bold;
}

.message .message-body .user-info .time {
    color: #a19c9c;
    font-size: 13px;
}

.message .message-body p {
    margin-top: 5px;
    color: #6e6e6e;
    font-size: 14px;
}

.send-message {
    background: #3F51B5;
    padding: 10px;
    display: flex;
}

.send-message input {
    width: 100%;
    padding: 7px 5px;
}

.send-message button {
    margin-left: 10px;
}

main {
    margin-top: 50px;
    display: flex;
    justify-content: center;
}

main form {
    width: 50%;
    padding: 20px;
}

main form .input-group label {
    text-align: center;
    margin-bottom: 5px;
    font-weight: bold;
}

main form .button-container {
    margin-top: 10px;
}

Julio Bastidas

student•

como se llama ese plugin de html en js?

Francisco Carranza

student•

excelente curso

Santiago Reynoso Dunjo

student•

Una opción similar a la extensión que usa el profe es: https://marketplace.visualstudio.com/items?itemName=ms-fast.fast-tagged-templates

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, Helvetica, sans-serif;
}

header {
    background: #43a8f0;
    color: #fff;
    padding: 7px;
}

.button-container {
    display: flex;
    justify-content: center;
}

[type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled) {
    cursor: pointer;
}

.btn {
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    text-align: center;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 1rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    color: var(--btn-color);
    background-color: var(--btn-bg);
}

.btn:hover {
    color: var(--btn-hover-color);
    background-color: var(--btn-hover-bg);
    border-color: var(--btn-hover-border-color);
}

.btn:focus {
    color: var(--btn-hover-color);
    background-color: var(--btn-hover-bg);
    border-color: var(--btn-hover-border-color);
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(var(--btn-focus-shadow-rgb), .5);
}

.btn:active {
    color: var(--btn-active-color);
    background-color: var(--btn-active-bg);
    border-color: var(--btn-active-border-color);
}

.primary {
    --btn-color: #fff;
    --btn-bg: #43a8f0;
    --btn-border-color: #43a8f0;
    --btn-hover-color: #fff;
    --btn-hover-bg: #116bf0;
    --btn-hover-border-color: #0a58ca;
    --btn-focus-shadow-rgb: 49,132,253;
    --btn-active-color: #fff;
    --btn-active-bg: #0a58ca;
    --btn-active-border-color: #0a53be;
    --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --btn-disabled-color: #fff;
    --btn-disabled-bg: #0d6efd;
    --btn-disabled-border-color: #0d6efd;
}

.secondary {
    --btn-color: #fff;
    --btn-bg: #7C4DFF;
    --btn-border-color: #7C4DFF;
    --btn-hover-color: #fff;
    --btn-hover-bg: #8356fd;
    --btn-hover-border-color: #8356fd;
    --btn-focus-shadow-rgb: 131,83,256;
    --btn-active-color: #fff;
    --btn-active-bg: #8356fd;
    --btn-active-border-color: #8356fd;
    --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --btn-disabled-color: #fff;
    --btn-disabled-bg: #8356fd;
    --btn-disabled-border-color: #8356fd;
}

.input-group {
    display: flex;
    flex-direction: column;
}

input {
    border: 1px solid #ccc;
    outline: none;
    padding: 10px;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
}

.card {
    box-shadow: 0 0 4px 0 rgb(0 0 0 / 8%), 0 2px 4px 0 rgb(0 0 0 / 12%);
    border-radius: 3px;
    background: #fff;
}

.image-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.image-container img {
    display: inline-block;
    width: 100%;
}

#all-messages {
    padding: 50px 25px;
}

.message {
    display: flex;
    margin-bottom: 20px;
}

.message .image-container {
    width: 50px;
    align-items: flex-start;
}

.message .message-body {
    margin-left: 10px;
    width: calc(100% - 50px)
}

.message .message-body .user-info {
    font-weight: bold;
}

.message .message-body .user-info .time {
    color: #a19c9c;
    font-size: 13px;
}

.message .message-body p {
    margin-top: 5px;
    color: #6e6e6e;
    font-size: 14px;
}

.send-message {
    background: #3F51B5;
    padding: 10px;
    display: flex;
}

.send-message input {
    width: 100%;
    padding: 7px 5px;
}

.send-message button {
    margin-left: 10px;
}

main {
    margin-top: 50px;
    display: flex;
    justify-content: center;
}

main form {
    width: 50%;
    padding: 20px;
}

main form .input-group label {
    text-align: center;
    margin-bottom: 5px;
    font-weight: bold;
}

main form .button-container {
    margin-top: 10px;
}

Programando la lógica del chat

Fundamentos de Socket.io

Cómo hacer aplicaciones en tiempo real

Protocolos de comunicación: HTTP vs. WebSockets

¿Qué es Socket.io?

Socket.io vs. WebSockets

¿Cómo funciona Socket.io?

Ciclo de vida de Socket.io

Socket.io en la práctica

Creando nuestra primera aplicación con Socket.io

Obteniendo información de conexiones en el servidor

Emisión de eventos

On, Once y Off

Broadcast de eventos

Creación de salas con Socket.io

Namespaces en Socket.io

Lógica de envio de mensajes

Manejo offline

Eventos volátiles

Manejo de Middlewares

Herramientas extra

Debugging en Socket.io

Configuración para testing usando la librería jest

Testing con jest

Admin UI

Proyecto WebChat

Estructura inicial del proyecto WebChat

Sistema de autenticación

Programando la lógica del chat

Detalles finales y demostración de chat en tiempo real

Cierre

¿Quieres un Curso Práctico de Socket.io?