Creare un'applicazione di chat in tempo reale
Sviluppi una semplice applicazione di chat in tempo reale che dimostri le funzionalità WebSocket in FastAPI.
Creare un'applicazione di chat in tempo reale è una lezione FastAPI Backend Development Bootcamp gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento FastAPI Backend Development Bootcamp, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso FastAPI Backend Development Bootcamp include 4 lezioni in totale.
Parti di questa lezione non sono ancora state tradotte e vengono mostrate in inglese.
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.
Domande Frequenti
La lezione «Creare un'applicazione di chat in tempo reale» è gratuita?
Sì — il testo completo di «Creare un'applicazione di chat in tempo reale» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso FastAPI Backend Development Bootcamp, passa a CoddyKit PRO. Il corso FastAPI Backend Development Bootcamp include 4 lezioni in totale.
Cosa imparerò in «Creare un'applicazione di chat in tempo reale»?
Sviluppi una semplice applicazione di chat in tempo reale che dimostri le funzionalità WebSocket in FastAPI. Eserciti FastAPI Backend Development Bootcamp con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare FastAPI Backend Development Bootcamp?
Non è richiesta alcuna esperienza precedente. FastAPI Backend Development Bootcamp su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.
Quanto tempo richiede la lezione «Creare un'applicazione di chat in tempo reale»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione FastAPI Backend Development Bootcamp?
Sì. Ogni lezione FastAPI Backend Development Bootcamp include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Fondamenti del protocollo WebSocket
- Implementare WebSocket in FastAPI
- Creare un'applicazione di chat in tempo reale
- Scalare i WebSocket con un backplane Pub/Sub