DEV Community: marop2

Build a Real-Time Server Dashboard with Python & WebSockets

marop2 — Mon, 13 Jul 2026 16:56:07 +0000

Build a Real-Time Server Dashboard with Python & WebSockets

A Step-by-Step Guide to Monitoring Your VPS Like a Pro

If you're managing a VPS, homelab, or even a Raspberry Pi, you've probably found yourself SSH-ing in just to run htop or glances. What if you could see all your server metrics in a beautiful web dashboard that updates in real-time?

In this tutorial, I'll show you how to build a lightweight server monitoring dashboard using Python (with psutil and aiohttp) and vanilla JavaScript with Chart.js — no React, no Vue, no bloated frameworks.

What We're Building

A dark-themed dashboard that shows:

CPU usage with real-time sparkline charts
RAM consumption with percentage and absolute values
Network throughput (upload/download in KB/s)
Disk usage across all mounted partitions
Top processes by CPU usage
System info (OS, hostname, uptime, cores)

All data is pushed via WebSocket — so the browser updates automatically, no polling needed.

The Architecture

[psutil] → [Python aiohttp server] ←WebSocket→ [Browser Dashboard]
                 ↕
          [Static HTML/CSS/JS]

The Python backend:

Collects system metrics using psutil
Serves the static dashboard files
Pushes metric snapshots to all connected browsers via WebSocket every 2 seconds

Step 1: The Backend

First, install the dependencies:

pip install psutil aiohttp

Here's the core metric collection function:

import psutil
import time

_prev_net = psutil.net_io_counters()
_prev_time = time.monotonic()

def collect_metrics():
    global _prev_net, _prev_time

    now = time.monotonic()
    dt = now - _prev_time
    _prev_time = now

    # CPU
    cpu_percent = psutil.cpu_percent(interval=None)

    # Memory
    mem = psutil.virtual_memory()

    # Network (calculate rate)
    net = psutil.net_io_counters()
    sent_rate = (net.bytes_sent - _prev_net.bytes_sent) / dt
    recv_rate = (net.bytes_recv - _prev_net.bytes_recv) / dt
    _prev_net = net

    # Disk
    disks = []
    for part in psutil.disk_partitions(all=False):
        try:
            usage = psutil.disk_usage(part.mountpoint)
            disks.append({
                "mountpoint": part.mountpoint,
                "percent": usage.percent,
                "total": usage.total,
                "used": usage.used,
            })
        except PermissionError:
            continue

    return {
        "cpu": {"percent": cpu_percent},
        "memory": {"percent": mem.percent, "total": mem.total, "used": mem.used},
        "network": {"sent_rate_kbs": sent_rate / 1024, "recv_rate_kbs": recv_rate / 1024},
        "disks": disks,
    }

The key insight: we track the previous network counter and timestamp to calculate the transfer rate in KB/s.

Step 2: WebSocket Server

Using aiohttp, we serve both the static files and the WebSocket endpoint:

import asyncio
import json
from aiohttp import web

clients = set()

async def ws_handler(request):
    ws = web.WebSocketResponse()
    await ws.prepare(request)
    clients.add(ws)
    try:
        data = collect_metrics()
        await ws.send_json(data)
        async for msg in ws:
            pass  # We only push, never receive
    finally:
        clients.discard(ws)
    return ws

async def broadcast(app):
    while True:
        await asyncio.sleep(2)
        if not clients:
            continue
        data = collect_metrics()
        payload = json.dumps(data)
        for ws in set(clients):
            try:
                await ws.send_str(payload)
            except:
                clients.discard(ws)

Step 3: The Dashboard UI

For the frontend, I used a single HTML file with inline CSS and JavaScript. The dark theme uses carefully chosen colors:

:root {
    --bg-primary: #0a0e17;
    --bg-card: #111827;
    --accent-blue: #3b82f6;
    --accent-cyan: #06b6d4;
    --accent-green: #10b981;
}

Each metric gets its own card with an animated progress bar and a dedicated color scheme. Chart.js handles the sparkline charts with smooth Bézier interpolation.

The WebSocket client auto-reconnects if the server goes down:

function connect() {
    const ws = new WebSocket(`ws://${location.host}/ws`);

    ws.onmessage = (event) => {
        const data = JSON.parse(event.data);
        updateDashboard(data);
    };

    ws.onclose = () => {
        setTimeout(connect, 3000); // Auto-reconnect
    };
}

Step 4: Run It

python server.py

Open http://localhost:8765 and watch your server metrics update in real-time!

Going Further

Some ideas to extend this:

Add alerts: Email or Discord webhook when CPU > 90%
Authentication: Add basic auth or API key for public-facing deployments
History storage: Log metrics to SQLite for historical analysis
Docker: Add a Dockerfile for one-command deployment

Grab the Full Source

If you want the complete, production-ready source code with the full premium dashboard UI, Docker support, and all features — you can grab it on my Gumroad.

I'm a 16-year-old developer from Lithuania building tools for sysadmins and server owners. Follow me for more tutorials on Linux, Docker, and Python!

python #webdev #tutorial #monitoring #devops #websocket #dashboard

How to Securely Set Up a Fresh Linux VPS and Install Docker in 3 Minutes

marop2 — Mon, 13 Jul 2026 04:14:18 +0000

Getting a new VPS (from DigitalOcean, Hetzner, Linode, etc.) is exciting. But the moment that server goes online with a public IP, automated bots start scanning it for vulnerabilities. If you leave it with default settings or a weak root password, it's only a matter of hours before it gets compromised.

In this tutorial, I'll show you exactly how to secure a fresh Ubuntu/Debian VPS and install Docker so you can start deploying your apps safely.

1. Update Your System First

The very first thing you should do is patch any outdated software.

apt-get update -y && apt-get upgrade -y

2. Configure a Firewall (UFW)

You only want to expose the ports you actually need. For a web server, that's SSH (22), HTTP (80), and HTTPS (443).

ufw default deny incoming
ufw default allow outgoing
ufw allow OpenSSH
ufw allow 80/tcp
ufw allow 443/tcp
ufw enable

3. Disable Password Authentication

This is crucial! Passwords can be brute-forced. SSH keys cannot.
First, make sure you've added your SSH public key to ~/.ssh/authorized_keys. Then, edit your SSH config:

sed -i 's/#PasswordAuthentication yes/PasswordAuthentication no/g' /etc/ssh/sshd_config
systemctl restart sshd

4. Install Fail2Ban

Fail2Ban automatically monitors your logs and bans IP addresses that show malicious signs, like too many password failures.

apt-get install fail2ban -y
systemctl enable fail2ban
systemctl start fail2ban

5. Install Docker & Compose V2

Now that the server is secure, we can install Docker. Don't use the default apt install docker.io as it's usually outdated.

# Add Docker's official GPG key and repo, then:
apt-get install -y docker-ce docker-ce-cli containerd.io docker-compose-plugin

Want to skip the manual work?

If you deploy servers often, doing this manually every time is a headache.

I wrote the Ultimate VPS Secure Setup Kit — a one-click bash script that automates this entire process. It handles the firewall, SSH hardening, Fail2Ban, shared memory security, unattended upgrades, and installs the latest Docker Engine.

You can grab the script here for just a few bucks:
👉 Ultimate VPS Secure Setup Kit on Gumroad

Just upload it, run ./setup.sh, and your server is hardened and ready for production in under 3 minutes.

Happy coding! 🐉

OGGG Bot (Nagi): Next-Gen Discord Casino & AI Bot

marop2 — Wed, 24 Jun 2026 00:52:08 +0000

What is OGGG Bot (Nagi)?

OGGG Bot (Nagi) is a next-generation Discord bot that combines AI-powered conversations, a full web-based casino, and an RPG economy system — all in one package.

Whether you're looking to spice up your Discord server with intelligent AI chat, engage your community with casino games, or build a thriving RPG economy — Nagi has you covered.

Key Features

🤖 Proactive AI Personalities (Gemini-powered)

Nagi isn't just a command-response bot. It features multiple AI personalities powered by Google's Gemini, each with their own character traits. The AI proactively participates in conversations, making your server feel alive.

🎰 Web-Based Neon Casino

One of Nagi's standout features is a full-fledged web casino at marop2.com. Players can enjoy various casino games right in their browser with a sleek neon aesthetic.

⚔️ RPG Economy System

Clans — Create or join clans, compete on leaderboards
Quests — Complete daily and weekly quests for rewards
Achievements — Unlock achievements as you progress
Voice Channel Rewards — Earn currency just by hanging out in voice channels

Try It Out

🌐 Website: marop2.com
🤖 Add to your server: Invite Link
💬 Support Server: Join Discord

Tech Stack

Nagi is built with modern web technologies and integrates deeply with the Discord API. The web casino at marop2.com provides a seamless experience that connects directly to your Discord account.

If you're a Discord server owner looking for something fresh and unique, give OGGG Bot (Nagi) a try. It's free to use and constantly being updated with new features!

Happy coding! 🚀

DEV Community: marop2

Build a Real-Time Server Dashboard with Python & WebSockets

Build a Real-Time Server Dashboard with Python & WebSockets

A Step-by-Step Guide to Monitoring Your VPS Like a Pro

What We're Building

The Architecture

Step 1: The Backend

Step 2: WebSocket Server

Step 3: The Dashboard UI

Step 4: Run It

Going Further

Grab the Full Source

Tags

python #webdev #tutorial #monitoring #devops #websocket #dashboard

How to Securely Set Up a Fresh Linux VPS and Install Docker in 3 Minutes

1. Update Your System First

2. Configure a Firewall (UFW)

3. Disable Password Authentication

4. Install Fail2Ban

5. Install Docker & Compose V2

Want to skip the manual work?

OGGG Bot (Nagi): Next-Gen Discord Casino & AI Bot

What is OGGG Bot (Nagi)?

Key Features

🤖 Proactive AI Personalities (Gemini-powered)

🎰 Web-Based Neon Casino

⚔️ RPG Economy System

Try It Out

Tech Stack