Crea un chat en tiempo real con React y Socket.io
En este artículo, aprenderás cómo crear un chat en tiempo real utilizando React y Socket.io. Socket.io es una librería de JavaScript que permite la comunicación en tiempo real entre clientes y servidores a través de websockets.
Para comenzar, necesitarás tener instalado Node.js en tu computadora. Luego, puedes crear un nuevo proyecto de React utilizando create-react-app.
npx create-react-app chat-app
cd chat-app
npm install socket.io-client
A continuación, necesitarás instalar el paquete de Socket.io en el servidor. Puedes hacerlo ejecutando el siguiente comando en la carpeta del proyecto:
npm install socket.io
Una vez que hayas instalado las dependencias, puedes empezar a construir tu chat. Crear un nuevo componente llamado Chat.js que se encargará de manejar la comunicación con el servidor a través de Socket.io.
import React, { useEffect, useState } from 'react';
import io from 'socket.io-client';
const socket = io('http://localhost:4000');
function Chat() {
const [messages, setMessages] = useState([]);
const [input, setInput] = useState('');
const sendMessage = () => {
socket.emit('chat message', input);
setInput('');
};
useEffect(() => {
socket.on('chat message', (msg) => {
setMessages([...messages, msg]);
});
}, [messages]);
return (
-
{messages.map((message, index) => (
- {message}
))}
setInput(e.target.value)}
/>
);
}
export default Chat;
Una vez que hayas definido el componente de Chat, puedes utilizarlo en tu aplicación de React para crear un chat en tiempo real. Simplemente importa el componente y añádelo a tu interfaz de usuario.
Por último, necesitarás iniciar el servidor de Socket.io para que tu chat funcione. Puedes hacerlo ejecutando el siguiente comando en la carpeta del proyecto:
node server.js
Con estos pasos, habrás creado un chat en tiempo real utilizando React y Socket.io. Ahora puedes probarlo enviando mensajes entre diferentes clientes y ver cómo la comunicación se mantiene actualizada en tiempo real.
👉¡En Garaje seguimos creciendo! Conoce nuestras vacantes de tech: https://bit.ly/talento-tech-GDI
Directo, claro y al grano….. muchas gracias!
Me sale NO CONECTADO, y no veo cual es el error… y tengo por un lado Servidor de chat en tiempo real escuchando en el puerto 3001, y en otra terminal npm start funcionando correctamente,
mis primeros pasos con un chat, gracias!
El package.json del server lo escribes desde cero? hardcoded?
Excelente vídeo. Conciso, directo y con repo funcional.
Excelente tutorial
Tu explicación es muy clara, gracias por el aporte.
Me salvaste, muy útil.
excelente, lo implementaré
Simple, sencillo pero demasiado util muchas gracias.
Gracias, colega, estoy en el proyecto final de una bootcamp y esto va a lucir que no veas
Me ecnantan estos videos.
podrías hacer lo mismo con trpc ? y sus subscriptions ? Estoy trabajando con el pero es un poco martirio
Muy buen video
Muy bueno el video Mario, tenes pensado usar con el server la base de datos de firebase para guardar los msj
y no perderlos, o es mejor directamente usar firebase como back. ?
Gracias por el video.
¿TIenen pensado uno con Angular?