Dashboard de Transacciones en Tiempo Real
Monitoreo de transacciones financieras en tiempo real con métricas en vivo, gráficos dinámicos y alertas automáticas. Sin polling. Sin refresh manual.
Este demo es un dashboard de monitoreo financiero en tiempo real que simula un flujo de transacciones con métricas agregadas, gráficos interactivos y notificaciones push vía WebSocket. Un servicio background genera ~10 transacciones por segundo, las métricas se agregan en ventanas deslizantes, y todo se transmite a los clientes conectados vía SignalR sin necesidad de polling.
Demo en Vivo
Cómo Funciona
Generación
Un servicio background (TransactionProcessorService) simula transacciones financieras a ~10 TPS, las inserta en MySQL y las publica en un Channel<T> de alta capacidad.
Agregación
Cada 500ms, MetricsAggregator calcula métricas en ventanas de 1 min, 5 min y 1 hora (TPS, volumen, tasa de éxito, transacciones flagged) y las cachea en IMemoryCache.
Broadcasting
DashboardBroadcaster lee del channel y del cache cada 500ms, envía batches de transacciones + métricas actualizadas a todos los clientes conectados vía SignalR (WebSocket).
Visualización
El frontend Blazor Server recibe los datos en tiempo real y actualiza métricas, gráficos (línea, doughnut, barras via Chart.js) y la tabla de transacciones con animaciones de highlight.
Características Principales
Métricas en vivo
TPS, volumen, tasa de éxito y transacciones flagged actualizados cada 500ms.
Gráfico de línea
Volumen de transacciones en ventana deslizante de ~300 puntos.
Gráfico doughnut
Distribución por estado: Completed, Pending, Processing, Failed, Flagged.
Gráfico de barras
Top 5 fuentes de transacciones: ATM, POS, Online, Transfer, Mobile.
Tabla de transacciones
Transacciones recientes con highlight animado para nuevas filas.
Indicador de conexión
Estado SignalR en vivo: Connected, Reconnecting, Disconnected.
Soporte bilingüe
Interfaz disponible en inglés y español.
Health check
Endpoint /health con verificación de base de datos.
Stack Técnico
Patrones de Arquitectura
Batched broadcasting
Eficiencia en envío masivo: agrupa transacciones y métricas antes de enviar a los clientes.
Métricas pre-computadas con cache
Evita queries pesados por request usando IMemoryCache con ventanas deslizantes.
Channel backpressure
BoundedChannel de 10K elementos para control de flujo entre productor y consumidores.
Typed SignalR Hub
Hub<IDashboardClient> para type-safety en la comunicación servidor-cliente.
Código Fuente
Ver en GitHub¿Necesitas un dashboard en tiempo real para tu negocio?
Hablemos de cómo puedo construir dashboards de monitoreo en tiempo real con métricas, gráficos y alertas para tu organización.
Contactar