I’ve been thinking a lot lately about how we communicate in real-time online. From team collaborations to customer support, the demand for instant, reliable chat systems is everywhere. That’s why I decided to build a robust WebSocket chat application using modern tools, and I want to share the process with you.

Creating a real-time chat system requires careful consideration of scalability and performance. How do we ensure messages reach everyone instantly, even as thousands of users join simultaneously?

Let’s start with the backend using FastAPI. This modern Python framework handles WebSocket connections efficiently with its async capabilities. Here’s how we establish a basic WebSocket endpoint:

from fastapi import FastAPI, WebSocket, WebSocketDisconnect
import json

app = FastAPI()

@app.websocket("/ws/{room_id}")
async def websocket_endpoint(websocket: WebSocket, room_id: str):
    await websocket.accept()
    try:
        while True:
            data = await websocket.receive_text()
            message = json.loads(data)
            # Process and broadcast message
    except WebSocketDisconnect:
        # Handle disconnection

But what happens when we need to scale across multiple servers? This is where Redis Pub/Sub becomes essential. It allows different server instances to communicate and broadcast messages efficiently:

import redis.asyncio as redis

redis_client = redis.from_url("redis://localhost:6379")

async def broadcast_message(room_id: str, message: dict):
    await redis_client.publish(f"room:{room_id}", json.dumps(message))

Authentication is crucial for any chat application. We need to verify users before allowing WebSocket connections. Here’s how we can implement JWT authentication:

from fastapi import Depends, HTTPException
from jose import JWTError, jwt

async def get_current_user(token: str):
    try:
        payload = jwt.decode(token, SECRET_KEY, algorithms=[ALGORITHM])
        return payload.get("sub")
    except JWTError:
        raise HTTPException(status_code=401, detail="Invalid token")

On the frontend, React handles the WebSocket connection smoothly. How do we manage connection states and reconnections in the browser?

useEffect(() => {
  const connectWebSocket = () => {
    const ws = new WebSocket('ws://localhost:8000/ws/general');
    
    ws.onmessage = (event) => {
      const message = JSON.parse(event.data);
      setMessages(prev => [...prev, message]);
    };
    
    ws.onclose = () => {
      setTimeout(connectWebSocket, 3000);
    };
    
    return ws;
  };

  const ws = connectWebSocket();
  return () => ws.close();
}, []);

Message persistence is another critical aspect. We need to store conversations while maintaining real-time delivery:

async def save_message(message_data: dict, db_session):
    message = Message(
        content=message_data["content"],
        sender_id=message_data["sender_id"],
        room_id=message_data["room_id"]
    )
    db_session.add(message)
    await db_session.commit()

Deployment with Docker ensures consistency across environments. Our docker-compose file manages all services:

version: '3.8'
services:
  web:
    build: ./backend
    ports:
      - "8000:8000"
    depends_on:
      - redis
      - postgres
  
  redis:
    image: redis:alpine
  
  postgres:
    image: postgres:15
    environment:
      POSTGRES_DB: chatdb

Building this application taught me valuable lessons about real-time systems. The combination of FastAPI’s async capabilities, Redis’ pub/sub system, and React’s state management creates a powerful foundation for any real-time application.

What other features would you add to make this chat system even more powerful? Message reactions? File sharing? Voice messages? The possibilities are endless when you have this solid foundation.

I’d love to hear your thoughts and experiences with real-time applications. If you found this useful, please share it with others who might benefit from it, and feel free to leave comments about your own implementation challenges or successes.