DEV Community

qing
qing

Posted on

Build a Real-Time Dashboard with Python and WebSockets

#python #websockets #dashboard #tutorial

Build a Real-Time Dashboard with Python and WebSockets

tags: python, websockets, dashboard, tutorial

tags: python, websockets, dashboard, tutorial

tags: python, websockets, dashboard, tutorial

Building a Real-Time Dashboard with Python and WebSockets

Imagine having a dashboard that updates in real-time, reflecting the current state of your system or application. No more refreshing the page or waiting for delayed updates - your dashboard is always up-to-date, providing you with instant insights into what's happening. This is the power of real-time data, and it's easier to achieve than you think.

What are WebSockets?

To understand how we'll build a real-time dashboard, we need to talk about WebSockets. WebSockets are a bi-directional communication protocol that allows your web application to send and receive data in real-time. Unlike traditional HTTP requests, WebSockets establish a persistent connection between the client and server, enabling efficient, low-latency communication.

Here's how it works: when a client (usually a web browser) establishes a WebSocket connection, it sends a request to the server to initiate the connection. The server then accepts the connection and sends a response back to the client, indicating that the connection is established. From this point forward, both the client and server can send data to each other without having to make a new request.

Setting Up a WebSocket Server with Python

To build our real-time dashboard, we'll use the websockets library in Python. This library provides a simple and efficient way to establish WebSocket connections and handle real-time data.

First, we'll install the websockets library using pip:

pip install websockets
Enter fullscreen mode Exit fullscreen mode

Next, let's create a basic WebSocket server using Python:

import asyncio
import websockets

async def handle_connection(websocket):
    while True:
        try:
            # Wait for incoming messages from the client
            message = await websocket.recv()
            print(f"Received message: {message}")
            # Send a response back to the client
            await websocket.send(f"Server received your message: {message}")
        except websockets.ConnectionClosed:
            print("Connection closed")
            break

async def main():
    async with websockets.serve(handle_connection, "localhost", 8765) as server:
        print(f"Server listening on port 8765")
        await server.wait_closed()

if __name__ == "__main__":
    asyncio.run(main())
Enter fullscreen mode Exit fullscreen mode

This code sets up a WebSocket server that listens for incoming connections on port 8765. When a client connects, the server prints out any incoming messages and sends a response back to the client.

Creating a Real-Time Dashboard with WebSocket Clients

Now that we have a WebSocket server up and running, let's create a simple dashboard client using JavaScript and the HTML5 WebSocket API.

We'll use the socket.io-client library to establish a WebSocket connection to our server:

<!DOCTYPE html>
<html>
<head>
  <title>Real-Time Dashboard</title>
  <script src="https://cdn.jsdelivr.net/npm/socket.io-client@2/dist/socket.io.js"></script>
  <script>
    // Establish a WebSocket connection to our server
    var socket = io("ws://localhost:8765");

    // Update the dashboard with incoming data
    socket.on("message", function(message) {
      console.log(message);
      document.getElementById("dashboard").innerHTML += `<p>${message}</p>`;
    });
  </script>
</head>
<body>
  <h1>Real-Time Dashboard</h1>
  <div id="dashboard"></div>

  <script>
    // Send a message to the server
    document.getElementById("sendButton").addEventListener("click", function() {
      var message = document.getElementById("messageInput").value;
      socket.emit("message", message);
    });
  </script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

This code establishes a WebSocket connection to our server and updates a dashboard element with any incoming messages. We also have a send button that sends a message to the server when clicked.

Putting It All Together

To see our real-time dashboard in action, we'll run both the server and client code in different terminal windows. First, let's start the server:

python server.py
Enter fullscreen mode Exit fullscreen mode

Next, open a web browser and navigate to http://localhost:8765. This will establish a WebSocket connection to our server, and we should see the dashboard update in real-time.

To test the real-time functionality, let's send a message to the server from the client code. Enter a message in the input field and click the send button. The dashboard should update immediately with the message we just sent.

Conclusion

Building a real-time dashboard with Python and WebSockets is easier than you think. By using the websockets library in Python and establishing a WebSocket connection to our server, we can create a dashboard that updates in real-time. With this knowledge, you can build your own real-time dashboards, reflecting the current state of your system or application.

So, what are you waiting for? Get started today and create your own real-time dashboards with Python and WebSockets!

If you found this helpful, consider buying me a coffee ☕ — it keeps these articles coming!

Also check out my AI tools collection: AI 次元世界 — free AI tools for developers.

Top comments (0)