Aprender a construir una aplicación web en tiempo real, utilizando FastAPI para el backend y React con WebSockets para el frontend. Esta app permitirá a los usuarios interactuar en tiempo real, mostrando cómo integrar tecnología moderna en un flujo de trabajo eficiente.
Requisitos Previos
- Conocimiento intermedio de Python.
- Conocimiento intermedio de JavaScript/TypeScript y React.
- Familiaridad con WebSockets.
- Conocimiento básico de la terminal y herramientas como npm y pip.
Paso 1: Configuración del Entorno Backend (FastAPI + WebSockets)
Instalar FastAPI y Uvicorn
FastAPI es un framework rápido de Python para la creación de APIs. Vamos a usarlo para gestionar las conexiones WebSocket.
pip install fastapi uvicorn
Configurar el servidor WebSocket en FastAPI
Creamos un archivo main.py para definir el servidor y gestionar las conexiones de WebSocket:
from fastapi import FastAPI, WebSocket, WebSocketDisconnect
from fastapi.responses import HTMLResponse
app = FastAPI()
# Manejador de conexión WebSocket
class ConnectionManager:
def __init__(self):
self.active_connections: list[WebSocket] = []
async def connect(self, websocket: WebSocket):
await websocket.accept()
self.active_connections.append(websocket)
async def disconnect(self, websocket: WebSocket):
self.active_connections.remove(websocket)
async def send_personal_message(self, message: str, websocket: WebSocket):
await websocket.send_text(message)
async def broadcast(self, message: str):
for connection in self.active_connections:
await connection.send_text(message)
manager = ConnectionManager()
@app.get("/")
def get():
return HTMLResponse("""
<html>
<head>
<title>WebSocket Chat</title>
</head>
<body>
<h1>Welcome to the WebSocket Chat!</h1>
<div id="messages"></div>
<input id="messageInput" type="text" placeholder="Type a message...">
<button id="sendButton">Send</button>
<script>
const ws = new WebSocket("ws://localhost:8000/ws/chat");
const messagesDiv = document.getElementById("messages");
const input = document.getElementById("messageInput");
const sendButton = document.getElementById("sendButton");
ws.onmessage = function(event) {
const message = document.createElement("div");
message.textContent = event.data;
messagesDiv.appendChild(message);
};
sendButton.onclick = function() {
ws.send(input.value);
input.value = '';
};
</script>
</body>
</html>
""")
@app.websocket("/ws/chat")
async def websocket_endpoint(websocket: WebSocket):
await manager.connect(websocket)
try:
while True:
data = await websocket.receive_text()
await manager.broadcast(data)
except WebSocketDisconnect:
manager.disconnect(websocket)
En este código:
- FastAPI maneja las conexiones WebSocket.
- ConnectionManager gestiona las conexiones activas y envía mensajes a todos los clientes conectados.
Ejecutar el servidor FastAPIuvicorn main:app --reload
uvicorn main:app --reload
El servidor estará escuchando en http://localhost:8000. Y podremos acceder a él.
Paso 2: Configuración del Entorno Frontend (React + WebSockets)
Crear la Aplicación React
Usamos create-react-app para crear la base del proyecto React:
npx create-react-app websocket-chat --template typescript cd websocket-chat
Instalar Dependencias
Asegúrate de tener WebSocket disponible en el frontend:
npm install --save websocket
Configurar WebSocket en React
Crea un componente Chat.tsx para gestionar la conexión WebSocket y la interfaz de usuario.
import React, { useEffect, useRef, useState } from 'react';
const Chat: React.FC = () => {
const [message, setMessage] = useState<string>('');
const [messages, setMessages] = useState<string[]>([]);
const ws = useRef<WebSocket | null>(null);
useEffect(() => {
ws.current = new WebSocket('ws://localhost:8000/ws/chat');
ws.current.onmessage = (event) => {
setMessages((prevMessages) => [...prevMessages, event.data]);
};
return () => {
if (ws.current) {
ws.current.close();
}
};
}, []);
const sendMessage = () => {
if (ws.current) {
ws.current.send(message);
setMessage('');
}
};
return (
<div>
<h1>WebSocket Chat</h1>
<div>
{messages.map((msg, index) => (
<div key={index}>{msg}</div>
))}
</div>
<input
type="text"
value={message}
onChange={(e) => setMessage(e.target.value)}
/>
<button onClick={sendMessage}>Send</button>
</div>
);
};
export default Chat;
En este componente:
- useEffect establece y limpia la conexión WebSocket.
- useRef mantiene la conexión abierta durante el ciclo de vida del componente.
- Se actualiza el estado messages para mostrar los mensajes recibidos.
Usar el Componente en la Aplicación
Edita App.tsx para usar el componente Chat.
import React from 'react';
import Chat from './Chat';
const App: React.FC = () => {
return (
<div className="App">
<Chat />
</div>
);
};
export default App;
Ejecutar la Aplicación React
npm start
Esto iniciará el servidor de desarrollo de React en http://localhost:3000, donde podrás interactuar con la app en tiempo real.
Paso 3: Interacción en Tiempo Real
Abre el navegador en dos o más pestañas o en dispositivos diferentes para probar cómo los mensajes se envían en tiempo real.
Cuando un usuario envía un mensaje, todos los demás usuarios verán el mensaje al instante sin necesidad de recargar la página.
Ingeniero en Informática, Investigador, me encanta crear cosas o arreglarlas y darles una nueva vida. Escritor y poeta. Más de 20 APPs publicadas y un libro en Amazon.