Skip to main content

Real-Time Frontend Dashboards

Building live-updating dashboards (like homelab monitoring, stock tickers, or admin panels) usually requires a complex stack. A typical architecture involves a backend service writing to Redis Pub/Sub, and a separate NodeJS translation layer running Socket.io just to bridge Redis events to the browser.

TinyMQ completely eliminates this middle layer.

The Challenge​

You have a backend service (written in Python, PHP, Go, etc.) generating metrics every second. You want to display these metrics live on a React or Vue frontend without forcing the frontend to repeatedly poll the backend (which drains battery and wastes bandwidth).

The TinyMQ Solution​

Because TinyMQ speaks HTTP, WebSockets, and Server-Sent Events (SSE) natively, it acts as a direct bridge between your backend scripts and your user's browser.

1. Backend Publishing (HTTP)​

Your backend workers don't need an SDK or a persistent connection. They simply make a standard REST POST request whenever new data is available.

# Python backend worker
import requests

payload = {"cpu_usage": 45, "ram_usage": 1024}
requests.post(
    "http://tinymq:7800/api/topics/dashboard.metrics",
    json=payload
)

2. Frontend Consumption (SSE)​

Your React frontend connects directly to TinyMQ using the browser's native EventSource API. There are no heavy client libraries to install.

// React Frontend
import { useEffect, useState } from 'react';

function Dashboard() {
  const [metrics, setMetrics] = useState({});

  useEffect(() => {
    // Connect directly to TinyMQ's SSE gateway
    const eventSource = new EventSource('http://tinymq:7800/api/topics/dashboard.metrics/sse');
    
    eventSource.onmessage = (event) => {
      const data = JSON.parse(event.data);
      setMetrics(data);
    };

    return () => eventSource.close();
  }, []);

  return (
    <div>
      <h1>Live Metrics</h1>
      <p>CPU: {metrics.cpu_usage}%</p>
    </div>
  );
}

Why it Shines Here​

  • No Translation Layer: You don't have to write and maintain a WebSocket server in NodeJS just to push messages to the browser.
  • Protocol Agnostic: The backend publishes over simple HTTP, while the frontend consumes over SSE. TinyMQ handles the protocol translation transparently in memory.
  • Broadcasting: If 1,000 users open the dashboard, they all connect to TinyMQ. Your Python backend still only makes one HTTP POST request, and TinyMQ efficiently fans out the message to all 1,000 connected SSE clients.