Construcción de una aplicación de chat en tiempo real
Desarrolle una aplicación sencilla de chat en tiempo real que demuestre las capacidades de WebSocket en FastAPI.
Construcción de una aplicación de chat en tiempo real es una lección gratuita de FastAPI Backend Development Bootcamp en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de FastAPI Backend Development Bootcamp, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de FastAPI Backend Development Bootcamp incluye 4 lecciones en total.
Partes de esta lección aún no han sido traducidas y se muestran en inglés.
Real-time Chat App Overview
Welcome to building your very own real-time chat application! This lesson brings together everything we've learned about WebSockets in FastAPI.
- We'll create a FastAPI server that manages multiple chat connections.
- Clients will connect via WebSockets to send and receive messages instantly.
- You'll see both the server-side (FastAPI) and a simple client-side (HTML/JavaScript) implementation.
Get ready to see real-time communication in action!
Managing Chat Connections
For a chat application, our server needs to keep track of all active WebSocket connections. When a user sends a message, the server will broadcast it to everyone else.
We'll use a simple ConnectionManager class to handle adding, removing, and broadcasting messages to connected clients.
from typing import List
from fastapi import 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)
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)FastAPI WebSocket Endpoint
Now let's create the FastAPI endpoint that clients will connect to. This endpoint will use our ConnectionManager.
When a client connects, we add them. When they send a message, we broadcast it. If they disconnect, we remove them.
from fastapi import FastAPI, WebSocket, WebSocketDisconnect
# ... ConnectionManager class from previous scene ...
app = FastAPI()
manager = ConnectionManager()
@app.websocket("/ws/{client_id}")
async def websocket_endpoint(websocket: WebSocket, client_id: int):
await manager.connect(websocket)
try:
while True:
data = await websocket.receive_text()
message = f"Client #{client_id} says: {data}"
await manager.broadcast(message)
except WebSocketDisconnect:
manager.disconnect(websocket)
await manager.broadcast(f"Client #{client_id} left the chat")Client-Side HTML Structure
Our chat application needs a simple user interface. We'll use basic HTML for an input field to send messages and a div to display them.
This is the foundation for our client-side interaction.
<!DOCTYPE html>
<html>
<head>
<title>Chat App</title>
</head>
<body>
<h1>FastAPI Chat</h1>
<form action="" onsubmit="sendMessage(event)">
<input type="text" id="messageText" autocomplete="off"/>
<button>Send</button>
</form>
<ul id='messages'>
</ul>
</body>
</html>Connecting with JavaScript
Now, let's add JavaScript to our HTML to connect to the FastAPI WebSocket server. We'll open a connection as soon as the page loads.
Remember to replace localhost:8000 with your server address if it's different!
<script>
var ws = new WebSocket("ws://localhost:8000/ws/1");
ws.onopen = function(event) {
console.log("Connected to WebSocket server!");
};
ws.onclose = function(event) {
console.log("Disconnected from WebSocket server.");
};
ws.onerror = function(error) {
console.error("WebSocket Error: ", error);
};
</script>Sending Messages from Client
Users need to be able to type a message and send it to the server. We'll create a JavaScript function that captures the input and sends it via the WebSocket connection.
This function is called when the form is submitted.
<script>
// ... WebSocket connection setup ...
function sendMessage(event) {
var input = document.getElementById("messageText");
ws.send(input.value);
input.value = '';
event.preventDefault();
}
</script>Receiving & Displaying Messages
The core of a chat application is receiving messages and displaying them. We'll implement the ws.onmessage event handler to append new messages to our list.
<script>
// ... WebSocket connection & sendMessage function ...
ws.onmessage = function(event) {
var messages = document.getElementById('messages');
var message = document.createElement('li');
var content = document.createTextNode(event.data);
message.appendChild(content);
messages.appendChild(message);
};
</script>Full FastAPI Chat Server
Here's the complete Python code for our FastAPI chat server. Save this as main.py and run it using uvicorn main:app --reload.
This server will listen for connections, broadcast messages, and announce user joins/leaves.
from typing import List
from fastapi import FastAPI, WebSocket, WebSocketDisconnect
from fastapi.responses import HTMLResponse
class ConnectionManager:
def __init__(self):
self.active_connections: List[WebSocket] = []
async def connect(self, websocket: WebSocket):
await websocket.accept()
self.active_connections.append(websocket)
def disconnect(self, websocket: WebSocket):
self.active_connections.remove(websocket)
async def broadcast(self, message: str):
for connection in self.active_connections:
await connection.send_text(message)
app = FastAPI()
manager = ConnectionManager()
html = """
<!DOCTYPE html>
<html>
<head>
<title>Chat App</title>
</head>
<body>
<h1>FastAPI Chat</h1>
<form action="" onsubmit="sendMessage(event)">
<input type="text" id="messageText" autocomplete="off"/>
<button>Send</button>
</form>
<ul id='messages'>
</ul>
<script>
var ws = new WebSocket("ws://localhost:8000/ws/1"); // Client ID is 1 for this example
ws.onopen = function(event) {
console.log("Connected to WebSocket server!");
};
ws.onmessage = function(event) {
var messages = document.getElementById('messages');
var message = document.createElement('li');
var content = document.createTextNode(event.data);
message.appendChild(content);
messages.appendChild(message);
};
ws.onclose = function(event) {
console.log("Disconnected from WebSocket server.");
};
ws.onerror = function(error) {
console.error("WebSocket Error: ", error);
};
function sendMessage(event) {
var input = document.getElementById("messageText");
ws.send(input.value);
input.value = '';
event.preventDefault();
}
</script>
</body>
</html>
"""
@app.get("/")
async def get():
return HTMLResponse(html)
@app.websocket("/ws/{client_id}")
async def websocket_endpoint(websocket: WebSocket, client_id: int):
await manager.connect(websocket)
await manager.broadcast(f"Client #{client_id} joined the chat")
try:
while True:
data = await websocket.receive_text()
message = f"Client #{client_id} says: {data}"
await manager.broadcast(message)
except WebSocketDisconnect:
manager.disconnect(websocket)
await manager.broadcast(f"Client #{client_id} left the chat")Quick Chat Logic Check
You've built a basic chat app! Consider the ConnectionManager's broadcast method and the FastAPI endpoint's logic.
If Client A sends a message to the server, what happens next to ensure Client B receives it?
Chat App Summary
Congratulations! You've successfully built a basic real-time chat application using FastAPI WebSockets.
- You learned to manage multiple active WebSocket connections with a
ConnectionManager. - You implemented a FastAPI WebSocket endpoint to handle incoming and outgoing messages.
- You created a simple HTML/JavaScript client to connect, send, and receive chat messages.
This project demonstrates the power of WebSockets for real-time communication. From here, you can add features like user authentication, persistent chat history, and more robust UI/UX.
Preguntas frecuentes
¿La lección «Construcción de una aplicación de chat en tiempo real» es gratis?
Sí — el texto completo de «Construcción de una aplicación de chat en tiempo real» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de FastAPI Backend Development Bootcamp, actualiza a CoddyKit PRO. El curso de FastAPI Backend Development Bootcamp incluye 4 lecciones en total.
¿Qué aprenderé en «Construcción de una aplicación de chat en tiempo real»?
Desarrolle una aplicación sencilla de chat en tiempo real que demuestre las capacidades de WebSocket en FastAPI. Practicas FastAPI Backend Development Bootcamp con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar FastAPI Backend Development Bootcamp?
No se requiere experiencia previa. FastAPI Backend Development Bootcamp en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.
¿Cuánto tiempo toma la lección «Construcción de una aplicación de chat en tiempo real»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de FastAPI Backend Development Bootcamp?
Sí. Cada lección de FastAPI Backend Development Bootcamp incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Fundamentos del protocolo WebSocket
- Implementación de WebSockets en FastAPI
- Construcción de una aplicación de chat en tiempo real
- Escalado de WebSockets con un backplane Pub/Sub