Create WebSocket

This guide shows how to build a simple WebSocket server using FastAPI.
Clients can connect to the /ws endpoint and receive a JSON message with CPU, memory, and Docker container information.
You can use this as a starting point for more advanced real-time monitoring features.

Step 1: Basic FastAPI Setup

Start by creating a FastAPI app and enabling CORS for local frontend development.

    from fastapi import FastAPI, WebSocket
    from fastapi.middleware.cors import CORSMiddleware

    app = FastAPI(title="Performance Dashboard API")

    app.add_middleware(
        CORSMiddleware,
        allow_origins=["http://localhost:3000"],
        allow_credentials=True,
        allow_methods=["*"],
        allow_headers=["*"],
    )

    @app.websocket("/ws")
    async def websocket_endpoint(websocket: WebSocket):
        pass  # We'll implement this in the next steps

    @app.get("/")
    def read_root():
        return {"message": "Performance Dashboard API is running."}

    if __name__ == "__main__":
        import uvicorn
        uvicorn.run(app, host="0.0.0.0", port=8000, reload=True)

Step 2: Accept WebSocket Connections

Now, accept WebSocket connections and send a simple message.

    # ... previous setup ...

    @app.websocket("/ws")
    async def websocket_endpoint(websocket: WebSocket):
        await websocket.accept()
        await websocket.send_text("WebSocket connection established!")
        await websocket.close()

    # ... previous setup ...

Step 3: Send System and Docker Stats

Finally, gather system and Docker stats and send them as JSON.

    import psutil
    import docker
    import json

    # ... previous setup ...
    docker_client = docker.from_env()

    # WebSocket endpoint
    @app.websocket("/ws")
    async def websocket_endpoint(websocket: WebSocket):
        await websocket.accept()
        docker_containers = []
        for idx, container in enumerate(docker_client.containers.list(all=True)):
            try:
                container_data = {
                    "id": container.id[:12] if container.id else "unknown",
                    "name": container.name if container.name else "unknown",
                    "status": container.status if container.status else "unknown",
                    "image": container.image.tags[0] if container.image.tags else (container.image.id[:12] if container.image.id else "unknown"),
                    "created": container.attrs.get('Created', '')[:19] if container.attrs.get('Created') else 'unknown'
                }
                docker_containers.append({f"container{idx}": container_data})
            except Exception as e:
                print(f"Error processing container: {e}")
                continue

        latest_data = {
            "cpu": {
                "cores_count": psutil.cpu_count(logical=False),
                "threads_count": psutil.cpu_count(),
                "cpu": round(psutil.cpu_percent(), 1),
                "frequency": round(psutil.cpu_freq().current, 1),
            },
            "memory": {
                "ram_total": round(psutil.virtual_memory().total / (1024**3), 2),
                "ram_available": round(psutil.virtual_memory().available / (1024**3), 2),
                "ram_percent": round(psutil.virtual_memory().percent, 1),
            },
            "docker": {
                "containers": docker_containers
            }
        }
        await websocket.send_text(json.dumps(latest_data))
        await websocket.close()
    
    # ... previous setup ...

How to Run the Backend

Follow these steps to start the FastAPI backend server:

    # Install dependencies
    pip install -r requirements.txt

    # Change directory to the backend
    cd backend
    
    # Run the backend 
    uvicorn main:app --reload

WebSocket Output

{
    "cpu": {
        "cores_count": 4,
        "threads_count": 8,
        "cpu": 4.5,
        "frequency": 2611.2
    },
    "memory": {
        "ram_total": 7.61,
        "ram_available": 4.94,
        "ram_percent": 35.1
    },
    "docker": {
        "containers": [
            {
                "container0": {
                "id": "970b24a9730e",
                "name": "bot2",
                "status": "exited",
                "image": "performance-bot:latest",
                "created": "2025-11-26T14:18:18"
                }
            },
            {
                "container1": {
                "id": "900d303cb952",
                "name": "bot",
                "status": "exited",
                "image": "snr1s3/performance-bot:latest",
                "created": "2025-11-26T10:53:37"
                }
            }
        ]
    }
}