DEV Community

Dulan Nithila Liyanarachchi
Dulan Nithila Liyanarachchi

Posted on Originally published at linkedin.com AI-assisted

Building a Real-Time Dashboard with FastAPI, WebSockets, and MySQL

#backend #database #fastapi #python

I recently worked on a lightweight real-time dashboard built with FastAPI, WebSockets, and aiomysql.

The main goal was simple: retrieve live data from a MySQL database and push updates to the frontend in real time without relying on continuous polling.

This project provided a practical opportunity to explore asynchronous programming, WebSocket communication, and database integration using Python.

Project Overview

The application uses a FastAPI backend to communicate with a MySQL database and a WebSocket endpoint to deliver database updates to connected clients.

The overall architecture can be summarized as:

MySQL Database
      │
      ▼
   aiomysql
      │
      ▼
FastAPI Backend
      │
      ▼
  WebSocket
      │
      ▼
Frontend Dashboard
Enter fullscreen mode Exit fullscreen mode

The WebSocket connection allows the server to push new data directly to the client, making the dashboard capable of displaying updates in real time.

What This Project Demonstrates

The project covers several important backend development concepts:

  • Setting up Python and the required dependencies
  • Building an asynchronous FastAPI backend
  • Connecting to MySQL using aiomysql
  • Implementing a WebSocket endpoint
  • Retrieving database records asynchronously
  • Sending live data to connected clients
  • Running the application with Uvicorn
  • Structuring a simple real-time backend application

Why Use WebSockets?

Traditional REST APIs generally follow a request/response model.

For example:

Client → Request → Server
Client ← Response ← Server
Enter fullscreen mode Exit fullscreen mode

If the frontend needs updated information continuously, it may have to repeatedly send requests to the server.

This is commonly known as polling:

Client → Request
Server → Response

Client → Request
Server → Response

Client → Request
Server → Response
Enter fullscreen mode Exit fullscreen mode

With WebSockets, the client establishes a persistent connection with the server:

Client ⇄ WebSocket Connection ⇄ Server
Enter fullscreen mode Exit fullscreen mode

The server can then push new information to the client whenever it becomes available.

This makes WebSockets particularly useful for applications where data needs to be delivered quickly and continuously.

Potential Use Cases

This architecture can be useful for:

  • Real-time dashboards
  • Monitoring systems
  • Live administration panels
  • Student management systems
  • Record management applications
  • System status monitoring
  • Live data visualization
  • Notification systems

Documentation and Source Code

I created a complete guide covering the setup and implementation process, including:

  • Python installation
  • Required package installation
  • Project configuration
  • Server startup
  • Complete main.py implementation
  • FastAPI and WebSocket configuration

The GitHub repository also includes the documentation and source code for reference.

GitHub Repository

FastAPI WebSocket Real-Time Dashboard - GitHub Repository

The repository contains:

  • Complete Guide (PDF)
  • Source Code (main.py)

Key Technologies

Technology Purpose
Python Backend programming
FastAPI Asynchronous web framework
WebSockets Real-time client-server communication
aiomysql Asynchronous MySQL connectivity
MySQL Database
Uvicorn ASGI server

Final Thoughts

This project was a useful exercise in combining asynchronous programming, database connectivity, and real-time communication into a practical backend application.

FastAPI and WebSockets provide a straightforward foundation for building applications where data needs to move between the server and client with minimal delay.

I look forward to extending this project with features such as authentication, multiple connected clients, automatic database change detection, improved error handling, and a more advanced frontend dashboard.

If you are working with FastAPI or real-time applications, I'd be interested to hear about your projects and approaches.

Also Published On

This article is also available on the following platforms:

Top comments (0)