Detalles finales y demostración de chat en tiempo real

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

Jason Francisco Macas Mora

student•

Muy bueno el curso, me gustó mucho. Gran profesor, muy instruido, y ameno. Ojalá realicen cursos más avanzados del tema. 🔥

Santiago Reynoso Dunjo

student•

Retax crack!

lucas bianchi

student•

gran curso, y el profe un capo total!

Hector Ibarra

student•

Como podria integrarlo con nextjs?

Carlos Alejandro Hernández Mejía

student•

¡Hola! Te dejo un post que público alguien en el blog de platzi. Aquí

Nicolás Arévalo

student•

Hubiera sido muy bueno enseñar cómo hacer deploy de la aplicación, porque no sé cómo crear un servidor htttp para que funcione en línea 🤔🤔🤔 De resto estuvo super!

Francisco Carranza

student•

yo intentare creando una instancia en google cloud

Oscar Rubio

student•

Que tal tengo una duda, cuando doy recargar el navegador el nombre de usuario se cambia por el ultimo que se conecto, alguien sabe como solucionar esto? trate con sessions y con un algoritmo para que valide cuando hay mas de una conexión. gracias

Andres Mauricio Cárdenas Sánchez

student•

el tema creo que es la cookie que almacena para probarlo tendría que usar otro navegador, realizar la prueba ejemplo uno en Edge y el otro en Crhome

Jose Ever Muñoz Muñoz

student•

Si estan en linux pueden averigurar su ip con el comando

hostname -I

La que necesitas es la primera la que empieza asi 192.168.x.x.

José Eduardo Ormeño Meneses

student•

Por si tienen varios valores en las cookies:

import { Server } from 'socket.io';
import cookie from "cookie"; 

export default function(httServer) {
    const io = new Server(httServer);

    io.on('connection', socket => {
        const rawCookie = socket.handshake.headers.cookie || "";
        const parsedCookies = cookie.parse(rawCookie);
        const username = parsedCookies.username || "Invitado";

        socket.on('message', message => {
            io.emit('message', {user:username, message});
        });
    });
}
```import { Server } from 'socket.io';import cookie from "cookie";&#x20;
export default function(httServer) {    const io = new Server(httServer);
    io.on('connection', socket => {        const rawCookie = socket.handshake.headers.cookie || "";        const parsedCookies = cookie.parse(rawCookie);        const username = parsedCookies.username || "Invitado";
        socket.on('message', message => {            io.emit('message', {user:username, message});        });    });}

Juan Camilo Lentino Villalba

student•

Servidor He añadido una mejora para personalizar la experiencia de cada usuario: ahora, al conectarse al servidor, se genera automáticamente una imagen aleatoria asociada a ese cliente utilizando una API externa (https://randomuser.me/api/). Para realizar esta petición, instalé y utilicé la librería Axios, que permite gestionar solicitudes HTTP de manera sencilla. La imagen se obtiene durante el evento de conexión del cliente y se almacena en una variable para enviarla junto con el resto de los datos en cada mensaje emitido al servidor:

const axios = require('axios');

module.exports = httpServer => { const { Server } = require('socket.io'); const io = new Server(httpServer);

io.on('connection', async socket => { try { const cookie = socket.handshake.headers.cookie; const user = cookie.split('=').pop();

// Realizar la petición para obtener una imagen aleatoria const imageResponse = await axios.get('https://randomuser.me/api/'); const image = imageResponse.data.results[0].picture.medium;

socket.on('message', messageData => { io.emit('message', { user, image, ...messageData, }); }); } catch (error) { console.error('Error:', error); } }); };

Cliente En el lado del cliente, al recibir un mensaje desde el servidor, también se recibe la imagen generada previamente. Simplemente reemplacé el valor del atributo src de la etiqueta <img> con la URL de la imagen que el servidor envía. Esto asegura que cada mensaje mostrado en la interfaz de usuario incluya la foto única del usuario:

socket.on('message', ({ user, image, message, timestamp }) => { const msg = document.createRange().createContextualFragment(` <div class="message"> <div class="image-container"> <img src=${image} alt="user-image" class="user-image" > </div> <div class="message-body"> <div class="user-info"> <span class="username">${user}</span> <span class="time">${timestamp}</span> </div> <p class="message-content">${message}</p> </div> </div> `);

allMessages.appendChild(msg); });

De esta forma, cada usuario conectado al servidor cuenta con una imagen única que se muestra en tiempo real junto a sus mensajes.

VICTOR MANUEL MURILLO CAMAYO

student•

Tambien pueden usar PORT en visual studio para abrir el puerto y compartirlo con personas por fuera de su red de internet 😃

Kevin Arizaga

student•

gran crurso sin duda¡¡¡

Detalles finales y demostración de chat en tiempo real

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?