Jason Francisco Macas Mora
student•
hace 3 años
Jason Francisco Macas Mora
Santiago Reynoso Dunjo
lucas bianchi
Hector Ibarra
Carlos Alejandro Hernández Mejía
Nicolás Arévalo
Francisco Carranza
Oscar Rubio
Andres Mauricio Cárdenas Sánchez
Jose Ever Muñoz Muñoz
José Eduardo Ormeño Meneses
Juan Camilo Lentino Villalba
VICTOR MANUEL MURILLO CAMAYO
Kevin Arizaga
Muy bueno el curso, me gustó mucho. Gran profesor, muy instruido, y ameno. Ojalá realicen cursos más avanzados del tema. 🔥
Retax crack!
gran curso, y el profe un capo total!
Como podria integrarlo con nextjs?
¡Hola! Te dejo un post que público alguien en el blog de platzi. Aquí
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!
yo intentare creando una instancia en google cloud
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
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
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.
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";  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}); }); });}
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.
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¡¡¡