Een realtime chatapplicatie bouwen
Ontwikkel een eenvoudige realtime chatapplicatie die de mogelijkheden van WebSockets in FastAPI demonstreert.
Een realtime chatapplicatie bouwen is een gratis Bootcamp backendontwikkeling met FastAPI-les op CoddyKit. Dit is les 3 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Bootcamp backendontwikkeling met FastAPI. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Bootcamp backendontwikkeling met FastAPI bevat in totaal 4 lessen.
Overzicht van een realtime-chatapp
Welkom bij het bouwen van je eigen realtime-chattoepassing! In deze les brengen we alles samen wat we over WebSockets in FastAPI hebben geleerd.
- We maken een FastAPI-server die meerdere chatverbindingen beheert.
- Clients maken via WebSockets verbinding om direct berichten te verzenden en te ontvangen.
- Je ziet zowel een implementatie aan de serverkant (FastAPI) als een eenvoudige implementatie aan de clientkant (HTML/JavaScript).
Maak je klaar om realtimecommunicatie in actie te zien!
Chatverbindingen beheren
Voor een chattoepassing moet onze server alle actieve WebSocket-verbindingen bijhouden. Wanneer een gebruiker een bericht verzendt, zendt de server het uit naar alle anderen.
We gebruiken een eenvoudige klasse ConnectionManager om het toevoegen en verwijderen van verbindingen en het uitzenden van berichten naar verbonden clients af te handelen.
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-eindpunt
Laten we nu het FastAPI-eindpunt maken waarmee clients verbinding maken. Dit eindpunt gebruikt onze ConnectionManager.
Wanneer een client verbinding maakt, voegen we die toe. Wanneer de client een bericht verzendt, zenden we het uit. Als de client de verbinding verbreekt, verwijderen we die.
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")HTML-structuur aan de clientkant
Onze chattoepassing heeft een eenvoudige gebruikersinterface nodig. We gebruiken basis-HTML voor een invoerveld om berichten te verzenden en een div om ze weer te geven.
Dit vormt de basis voor de interactie aan de clientkant.
<!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>Verbinding maken met JavaScript
Laten we nu JavaScript aan onze HTML toevoegen om verbinding te maken met de FastAPI WebSocket-server. We openen een verbinding zodra de pagina is geladen.
Vergeet niet om localhost:8000 te vervangen door het adres van je server als dat anders is!
<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>Berichten vanaf de client verzenden
Gebruikers moeten een bericht kunnen typen en naar de server kunnen verzenden. We maken een JavaScript-functie die de invoer vastlegt en via de WebSocket-verbinding verzendt.
Deze functie wordt aangeroepen wanneer het formulier wordt verzonden.
<script>
// ... WebSocket connection setup ...
function sendMessage(event) {
var input = document.getElementById("messageText");
ws.send(input.value);
input.value = '';
event.preventDefault();
}
</script>Berichten ontvangen en weergeven
De kern van een chattoepassing is het ontvangen en weergeven van berichten. We implementeren de gebeurtenisafhandelaar ws.onmessage om nieuwe berichten aan onze lijst toe te voegen.
<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>Volledige FastAPI-chatserver
Hier is de volledige Python-code voor onze FastAPI-chatserver. Sla deze op als main.py en voer de server uit met uvicorn main:app --reload.
Deze server luistert naar verbindingen, zendt berichten uit en kondigt aan wanneer gebruikers deelnemen of vertrekken.
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")Snelle controle van chatlogica
Je hebt een eenvoudige chatapp gebouwd! Denk na over de methode broadcast van ConnectionManager en de logica van het FastAPI-eindpunt.
Als client A een bericht naar de server verzendt, wat gebeurt er dan om ervoor te zorgen dat client B het ontvangt?
Samenvatting van de chatapp
Gefeliciteerd! Je hebt met FastAPI WebSockets een eenvoudige realtime-chattoepassing gebouwd.
- Je hebt geleerd hoe je meerdere actieve WebSocket-verbindingen beheert met een
ConnectionManager. - Je hebt een FastAPI WebSocket-eindpunt geïmplementeerd voor het afhandelen van inkomende en uitgaande berichten.
- Je hebt een eenvoudige HTML/JavaScript-client gemaakt om verbinding te maken en chatberichten te verzenden en ontvangen.
Dit project laat zien hoe krachtig WebSockets zijn voor realtimecommunicatie. Vanaf hier kun je functies toevoegen zoals gebruikersauthenticatie, een blijvende chatgeschiedenis en een robuustere gebruikersinterface en gebruikerservaring.
Leer Bootcamp backendontwikkeling met FastAPI met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 21
- Lessen
- 84
Veelgestelde vragen
Is de les “Een realtime chatapplicatie bouwen” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad Bootcamp backendontwikkeling met FastAPI, waaronder “Een realtime chatapplicatie bouwen”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus Bootcamp backendontwikkeling met FastAPI bevat in totaal 4 lessen.
Wat leer ik in “Een realtime chatapplicatie bouwen”?
Ontwikkel een eenvoudige realtime chatapplicatie die de mogelijkheden van WebSockets in FastAPI demonstreert. Je oefent met Bootcamp backendontwikkeling met FastAPI door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met Bootcamp backendontwikkeling met FastAPI te beginnen?
Ervaring vooraf is niet nodig. Bootcamp backendontwikkeling met FastAPI op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 3 van 4.
Hoe lang duurt de les “Een realtime chatapplicatie bouwen”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over Bootcamp backendontwikkeling met FastAPI?
Ja. Elke les over Bootcamp backendontwikkeling met FastAPI bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- De basis van het WebSocket-protocol
- WebSockets implementeren in FastAPI
- Een realtime chatapplicatie bouwen
- WebSockets schalen met een pub/sub-backplane