Building a Real-time Chat Application
Develop a simple real-time chat application demonstrating WebSocket capabilities in FastAPI.
Building a Real-time Chat Application is a free FastAPI Backend Development Bootcamp lesson on CoddyKit. This is lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the FastAPI Backend Development Bootcamp learning path, and your progress syncs across the web and the CoddyKit app. The FastAPI Backend Development Bootcamp course includes 4 lessons in total.
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.
Frequently Asked Questions
Is the “Building a Real-time Chat Application” lesson free?
Yes — the full text of “Building a Real-time Chat Application” is free to read here on the web. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the FastAPI Backend Development Bootcamp course, upgrade to CoddyKit PRO. The FastAPI Backend Development Bootcamp course includes 4 lessons in total.
What will I learn in “Building a Real-time Chat Application”?
Develop a simple real-time chat application demonstrating WebSocket capabilities in FastAPI. You practise FastAPI Backend Development Bootcamp with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start FastAPI Backend Development Bootcamp?
No prior experience is required. FastAPI Backend Development Bootcamp on CoddyKit is structured for beginners through advanced learners, so you can start here or from the beginning and move at your own pace. This is lesson 3 of 4.
How long does the “Building a Real-time Chat Application” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this FastAPI Backend Development Bootcamp lesson?
Yes. Every FastAPI Backend Development Bootcamp lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- WebSocket Protocol Fundamentals
- Implementing WebSockets in FastAPI
- Building a Real-time Chat Application
- Scaling WebSockets with a Pub/Sub Backplane