Dashboards Frontend en Tiempo Real

Construir dashboards con actualizaciones en vivo (como monitoreo de homelab, tickers de bolsa o paneles de administración) normalmente requiere un stack complejo. Una arquitectura típica implica un servicio backend escribiendo en Redis Pub/Sub, y una capa de traducción NodeJS separada ejecutando Socket.io solo para llevar los eventos de Redis al navegador.

TinyMQ elimina por completo esta capa intermedia.

El Desafío

Tienes un servicio backend (escrito en Python, PHP, Go, etc.) generando métricas cada segundo. Quieres mostrar esas métricas en vivo en un frontend React o Vue sin forzar al frontend a hacer polling repetido al backend (lo que drena la batería y desperdicia ancho de banda).

La Solución TinyMQ

Dado que TinyMQ habla HTTP, WebSockets y Server-Sent Events (SSE) de forma nativa, actúa como un puente directo entre tus scripts de backend y el navegador del usuario.

1. Publicación desde el Backend (HTTP)

Tus workers de backend no necesitan un SDK ni una conexión persistente. Simplemente hacen una petición REST POST estándar cuando hay nuevos datos disponibles.

# Python backend worker
import requests

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

2. Consumo en el Frontend (SSE)

Tu frontend React se conecta directamente a TinyMQ usando la API nativa EventSource del navegador. No hay librerías de cliente pesadas que instalar.

// 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>
  );
}

Por Qué Destaca Aquí

• Sin Capa de Traducción: No tienes que escribir ni mantener un servidor WebSocket en NodeJS solo para llevar mensajes al navegador.
• Agnóstico al Protocolo: El backend publica vía HTTP simple, mientras el frontend consume vía SSE. TinyMQ gestiona la traducción de protocolos de forma transparente en memoria.
• Broadcasting: Si 1.000 usuarios abren el dashboard, todos se conectan a TinyMQ. Tu backend Python sigue haciendo solo una petición HTTP POST, y TinyMQ hace el fan-out eficientemente del mensaje a los 1.000 clientes SSE conectados.