Cursos Empresas Blog Live Conf Eventos Precios

0:007:55

Detalles finales y demostración de chat en tiempo real

Curso de Aplicaciones en Tiempo Real con Socket.io

Clase 25 de 26

Clase 25 / 26

Juan Camilo Lentino Villalba

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.

Comentarios (11)11 comentarios

Jason Francisco Macas Mora

Hace 4 años

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

Santiago Reynoso Dunjo

Hace 3 años

Retax crack!

lucas bianchi

gran curso, y el profe un capo total!

Jose Ever Muñoz Muñoz

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.

Hector Ibarra

Como podria integrarlo con nextjs?

Carlos Alejandro Hernández Mejía

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

Nicolás Arévalo

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

yo intentare creando una instancia en google cloud

Oscar Rubio

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

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

José Eduardo Ormeño Meneses

VICTOR MANUEL MURILLO CAMAYO

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

Kevin Arizaga

gran crurso sin duda¡¡¡

Detalles finales y demostración de chat en tiempo real

Progreso del curso

Fundamentos de Socket.io

Socket.io en la práctica

Herramientas extra

Proyecto WebChat

Cierre