React Chat con Nodejs y Socketio (Web Sockets y Vitejs)

En este artículo, vamos a explorar cómo construir un chat en tiempo real utilizando React, Nodejs, Socket.io y Vitejs.

Tecnologías Utilizadas

• React: Una librería de JavaScript para construir interfaces de usuario.
• Nodejs: Un entorno de ejecución de JavaScript del lado del servidor.
• Socket.io: Una librería de JavaScript para comunicación en tiempo real.
• Vitejs: Una herramienta de construcción y desarrollo de aplicaciones front-end.

Instalación y Configuración

Para comenzar, necesitaremos configurar un servidor Nodejs con Socket.io para gestionar la comunicación en tiempo real. También utilizaremos Vitejs para compilar y servir el cliente de React.

Primero, vamos a configurar el servidor Nodejs:

        
            // server.js
            const express = require('express');
            const http = require('http');
            const socketIo = require('socket.io');

            const app = express();
            const server = http.createServer(app);
            const io = socketIo(server);

            io.on('connection', (socket) => {
                console.log('Usuario conectado');
                socket.on('chat message', (msg) => {
                    io.emit('chat message', msg);
                });

                socket.on('disconnect', () => {
                    console.log('Usuario desconectado');
                });
            });

            server.listen(3001, () => {
                console.log('Servidor en ejecución en el puerto 3001');
            });
        
    

Luego, configuraremos el cliente de React utilizando Vitejs:

        
            // App.jsx
            import React, { useState, useEffect } from 'react';
            import io from 'socket.io-client';

            const socket = io('http://localhost:3001');

            function App() {
                const [messages, setMessages] = useState([]);
                const [message, setMessage] = useState('');

                useEffect(() => {
                    socket.on('chat message', (msg) => {
                        setMessages((prevMessages) => [...prevMessages, msg]);
                    });
                }, []);

                const sendMessage = () => {
                    socket.emit('chat message', message);
                    setMessage('');
                };

                return (
                    

                        
Chat en tiempo real
                        

                            {messages.map((msg, index) => (
                                
{msg}
                            ))}
                        
                         setMessage(e.target.value)} />
                        Enviar
                    
                );
            }

            export default App;
        
    

Ejecución del Proyecto

Una vez que hemos configurado el servidor Nodejs y el cliente de React, podemos ejecutar el proyecto. En la terminal, ejecutaremos los siguientes comandos:

        
            // Terminal
            // Instalar dependencias del servidor
            npm install express http socket.io

            // Instalar dependencias del cliente
            npm install react react-dom socket.io-client

            // Iniciar el servidor
            node server.js

            // Iniciar el cliente
            npm run dev
        
    

Con esto, tendremos un chat en tiempo real funcionando utilizando React, Nodejs y Socket.io. Ahora, los usuarios podrán enviar mensajes y recibir notificaciones en tiempo real.