构建实时聊天应用
开发一个简单的实时聊天应用，演示 FastAPI 中的 WebSocket 功能。
构建实时聊天应用 是 CoddyKit 上的免费 FastAPI Backend Development Bootcamp 课时。 这是第 3 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 FastAPI Backend Development Bootcamp 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 FastAPI Backend Development Bootcamp 课程共包含 4 节课。
本课时的部分内容尚未翻译，以英文显示。
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.
用 AI 导师学习 FastAPI Backend Development Bootcamp — 免费
在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。
- 课程
- 21
- 课程
- 84
常见问题解答
「构建实时聊天应用」课时是免费的吗？
是的 — 「构建实时聊天应用」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 FastAPI Backend Development Bootcamp 课程的其余内容，请升级到 CoddyKit PRO。 FastAPI Backend Development Bootcamp 课程共包含 4 节课。
「构建实时聊天应用」这节课中我会学到什么？
开发一个简单的实时聊天应用，演示 FastAPI 中的 WebSocket 功能。 你通过在浏览器中直接运行的动手代码来练习 FastAPI Backend Development Bootcamp，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 FastAPI Backend Development Bootcamp 需要有经验吗？
无需任何先前经验。CoddyKit 上的 FastAPI Backend Development Bootcamp 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 3 节课，共 4 节。
「构建实时聊天应用」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 FastAPI Backend Development Bootcamp 课中编写并运行代码吗？
能。每节 FastAPI Backend Development Bootcamp 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。