Conectar una Aplicación React a un WebSocket

Tiempo de lectura: < 1 minuto

Hoy vamos a aprender cómo podemos conectar nuestra web desarrollada con React a un WebSocket

Configuración de la Aplicación React

1. Crear un Nuevo Proyecto React:
   Crea un nuevo proyecto React utilizando create-react-app:

   npx create-react-app my-react-app
   cd my-react-app

2. Instalar Dependencia de WebSocket:
   Instala la biblioteca react-websocket para manejar conexiones WebSocket en React:

   npm install --save react-websocket

3. Implementar Componente WebSocket en React:
   Reemplaza el contenido de src/App.js con el siguiente código:

   import React, { useState } from 'react';
   import { WebSocketProvider, useWebSocket } from 'react-websocket';

   function App() {
     const [message, setMessage] = useState('');
     const { sendJsonMessage } = useWebSocket('ws://localhost:8000/ws/1');

     const handleMessageChange = (e) => {
       setMessage(e.target.value);
     };

     const sendMessage = () => {
       sendJsonMessage({ message });
     };

     return (
       <div className="App">
         <h1>WebSocket React</h1>
         <input
           type="text"
           value={message}
           onChange={handleMessageChange}
         />
         <button onClick={sendMessage}>Enviar Mensaje</button>
       </div>
     );
   }

   function AppWithWebSocket() {
     return (
       <WebSocketProvider url="ws://localhost:8000/ws/1">
         <App />
       </WebSocketProvider>
     );
   }

   export default AppWithWebSocket;

Asegúrate de reemplazar ws://localhost:8000/ws/1 con la URL de tu servidor FastAPI.

4. Ejecutar la Aplicación React:
   Ejecuta la aplicación React:

   npm start

Visita http://localhost:3000 en tu navegador y verás la aplicación React. Puedes escribir mensajes, enviarlos y ver las respuestas del servidor FastAPI a través del WebSocket.

Este tutorial proporciona una base para la implementación de WebSocket en una aplicación React conectada a un servidor FastAPI. Puedes personalizar y expandir la aplicación según tus necesidades específicas.