Opbygning af en chatapplikation i realtid
Udvikl en enkel chatapplikation i realtid, der demonstrerer WebSocket-funktioner i FastAPI.
Opbygning af en chatapplikation i realtid er en gratis Bootcamp i FastAPI-backendudvikling-lektion på CoddyKit. Dette er lektion 3 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i Bootcamp i FastAPI-backendudvikling, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Bootcamp i FastAPI-backendudvikling-kurset indeholder 4 lektioner i alt.
Oversigt over chatprogrammet i realtid
Velkommen til at bygge dit helt eget chatprogram i realtid! I denne lektion samler vi alt det, vi har lært om WebSockets i FastAPI.
- Vi opretter en FastAPI-server, der administrerer flere chatforbindelser.
- Klienter opretter forbindelse via WebSockets for at sende og modtage beskeder med det samme.
- Du ser både en implementering på serversiden (FastAPI) og en enkel implementering på klientsiden (HTML/JavaScript).
Gør dig klar til at se kommunikation i realtid i praksis!
Administration af chatforbindelser
I et chatprogram skal serveren holde styr på alle aktive WebSocket-forbindelser. Når en bruger sender en besked, udsender serveren den til alle andre.
Vi bruger en enkel ConnectionManager-klasse til at håndtere tilføjelse og fjernelse af forbindelser samt udsendelse af beskeder til tilsluttede klienter.
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-slutpunkt
Lad os nu oprette det FastAPI-slutpunkt, som klienterne skal oprette forbindelse til. Dette slutpunkt bruger vores ConnectionManager.
Når en klient opretter forbindelse, tilføjer vi den. Når den sender en besked, udsender vi den. Hvis den afbryder forbindelsen, fjerner vi den.
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-struktur på klientsiden
Vores chatprogram skal have en enkel brugergrænseflade. Vi bruger grundlæggende HTML til et inputfelt, hvor beskeder kan sendes, samt et div-element til at vise dem.
Dette er grundlaget for interaktionen på klientsiden.
<!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>Oprettelse af forbindelse med JavaScript
Lad os nu føje JavaScript til vores HTML for at oprette forbindelse til FastAPI WebSocket-serveren. Vi åbner en forbindelse, så snart siden indlæses.
Husk at erstatte localhost:8000 med din serveradresse, hvis den er anderledes!
<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>Afsendelse af beskeder fra klienten
Brugerne skal kunne skrive en besked og sende den til serveren. Vi opretter en JavaScript-funktion, der opfanger inputtet og sender det via WebSocket-forbindelsen.
Denne funktion kaldes, når formularen indsendes.
<script>
// ... WebSocket connection setup ...
function sendMessage(event) {
var input = document.getElementById("messageText");
ws.send(input.value);
input.value = '';
event.preventDefault();
}
</script>Modtagelse og visning af beskeder
Kernen i et chatprogram er at modtage og vise beskeder. Vi implementerer hændelseshåndteringen ws.onmessage for at føje nye beskeder til vores liste.
<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>Komplet FastAPI-chatserver
Her er den komplette Python-kode til vores FastAPI-chatserver. Gem den som main.py, og kør den med uvicorn main:app --reload.
Denne server lytter efter forbindelser, udsender beskeder og annoncerer, når brugere tilslutter sig eller forlader chatten.
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")Hurtig kontrol af chatlogikken
Du har bygget et grundlæggende chatprogram! Overvej ConnectionManagers broadcast-metode og logikken i FastAPI-slutpunktet.
Hvis klient A sender en besked til serveren, hvad sker der så for at sikre, at klient B modtager den?
Opsummering af chatprogrammet
Tillykke! Du har opbygget et grundlæggende chatprogram i realtid ved hjælp af FastAPI WebSockets.
- Du har lært at administrere flere aktive WebSocket-forbindelser med en
ConnectionManager. - Du har implementeret et FastAPI-WebSocket-slutpunkt til håndtering af indgående og udgående beskeder.
- Du har oprettet en enkel HTML/JavaScript-klient, der kan oprette forbindelse samt sende og modtage chatbeskeder.
Dette projekt demonstrerer WebSockets' styrke til kommunikation i realtid. Herfra kan du tilføje funktioner som brugergodkendelse, en permanent chathistorik og en mere robust brugergrænseflade og brugeroplevelse.
Lær Bootcamp i FastAPI-backendudvikling med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 21
- Lektioner
- 84
Ofte stillede spørgsmål
Er lektionen “Opbygning af en chatapplikation i realtid” gratis?
Ja — alle 3 lektioner i læringssporet Bootcamp i FastAPI-backendudvikling, inklusive “Opbygning af en chatapplikation i realtid”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Bootcamp i FastAPI-backendudvikling-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Opbygning af en chatapplikation i realtid”?
Udvikl en enkel chatapplikation i realtid, der demonstrerer WebSocket-funktioner i FastAPI. Du øver dig i Bootcamp i FastAPI-backendudvikling med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på Bootcamp i FastAPI-backendudvikling?
Der kræves ingen tidligere erfaring. Bootcamp i FastAPI-backendudvikling på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 3 af 4.
Hvor lang tid tager lektionen “Opbygning af en chatapplikation i realtid”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne Bootcamp i FastAPI-backendudvikling-lektion?
Ja. Alle Bootcamp i FastAPI-backendudvikling-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Grundlæggende WebSocket-protokol
- Implementering af WebSockets i FastAPI
- Opbygning af en chatapplikation i realtid
- Skalering af WebSockets med en Pub/Sub-backplane