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.
