WebSocket — real-time bidirectional

Persistent connection. Server can push to client without the client asking. Used for live updates, chat, notifications.

main.py v3.1

from fastapi import FastAPI, WebSocket, WebSocketDisconnect
from fastapi.responses import HTMLResponse

app = FastAPI()

# In-memory connection manager
class ConnectionManager:
    def __init__(self):
        self.active: list[WebSocket] = []

    async def connect(self, ws: WebSocket):
        await ws.accept()
        self.active.append(ws)

    def disconnect(self, ws: WebSocket):
        self.active.remove(ws)

    async def broadcast(self, message: str):
        # Send to EVERY connected client
        for ws in self.active:
            await ws.send_text(message)

manager = ConnectionManager()

@app.websocket('/ws/chat')
async def chat_endpoint(ws: WebSocket):
    await manager.connect(ws)
    try:
        while True:
            # Wait for a message from the client
            data = await ws.receive_text()
            # Broadcast to everyone (including sender)
            await manager.broadcast(f'User: {data}')
    except WebSocketDisconnect:
        manager.disconnect(ws)
        await manager.broadcast('A user left')

# Client-side HTML:
"""
<input id="msg" placeholder="Type a message">
<button onclick="send()">Send</button>
<div id="chat"></div>

<script>
  const ws = new WebSocket('ws://localhost:8000/ws/chat');
  ws.onmessage = (e) => {
    document.getElementById('chat').innerHTML += '<p>' + e.data + '</p>';
  };
  function send() {
    ws.send(document.getElementById('msg').value);
    document.getElementById('msg').value = '';
  }
</script>
"""

API simulator click Simulate

Click "Simulate" to see what this FastAPI app does.

🧠 How it works

@app.websocket('/path') — registers a WebSocket endpoint. WebSocket is a PERSISTENT connection — unlike HTTP (request → response → close), WebSocket stays open and EITHER side can send at any time. await ws.accept() — must be called first to complete the handshake. await ws.receive_text() / receive_json() / receive_bytes() — block until a message arrives. await ws.send_text() / send_json() / send_bytes() — send to THIS client. WebSocketDisconnect exception — raised when the client closes the tab. ConnectionManager pattern: keep a list of active connections, broadcast to all of them. Use cases: live leaderboards, chat, notifications, real-time dashboards, multiplayer games. WebSocket vs polling: WS pushes instantly (0ms lag); polling checks every N seconds (N/2 lag average).

✏️ Try these changes

Change '/ws/chat' to '/ws/notifications'
→ different endpoint URL
Change send_text to send_json with {user: 'x', msg: data}
→ structured messages
Add a 'send_to_sender_only' method that sends only to the originating ws
→ private message
Add a rate limiter: refuse more than 5 messages per second from one client
→ anti-spam

← Previous lab

Static files — CSS, JS, images

Next lab →

Middleware — runs before/after every request