No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Detalles finales y demostración de chat en tiempo real

25/26
Recursos

Aportes 7

Preguntas 2

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

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

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!

gran curso, y el profe un capo total!

Retax crack!

**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 `` 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(` `` `
` `
` ` ` `
` `
` ` ` `

${message}

` `
` `
` `` `);`` ` 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.
Tambien pueden usar PORT en visual studio para abrir el puerto y compartirlo con personas por fuera de su red de internet 😃

gran crurso sin duda¡¡¡