Elevando el Nivel de Dext: Monitoreo de Telemetría en Tiempo Real con HTTP.sys y Server-Sent Events (SSE)

El desarrollo de aplicaciones web modernas con comunicación bidireccional en tiempo real a menudo dirige a los desarrolladores hacia plataformas como Node.js o .NET Core con SignalR. Sin embargo, en el ecosistema Delphi, el framework Dext demuestra que es posible obtener un rendimiento extremo de nivel empresarial ejecutándose directamente sobre la API nativa de kernel de Windows: el HTTP.sys.

Este artículo presenta en detalle el proyecto de ejemplo Dext AirFlow (Control Tower), demostrando cómo creamos un panel de control aeroespacial táctico en tiempo real, los patrones arquitectónicos de backend y frontend adoptados, y por qué la combinación de HTTP.sys nativo con buses de mensajería en tiempo real representa el estado del arte para proyectos de alto rendimiento en Delphi.

---

¿Qué hace que HTTP.sys + Dext sea tan potente?

Tradicionalmente, los servidores web en Delphi dependen de sockets en modo de usuario (como Indy) o servidores de terceros. Dext cambia esto al proporcionar una abstracción delgada y de alto rendimiento sobre el controlador de kernel HTTP.sys (el mismo motor detrás de IIS).

Las ventajas de este enfoque para aplicaciones en tiempo real son significativas:

1. Enrutamiento en Kernel: Las solicitudes HTTP de control y la negociación de conexiones persistentes se reciben y preprocesan directamente en el Kernel de Windows, evitando la sobrecarga de cambio de contexto (Context Switching) común en los servidores en modo de usuario.
2. Uso Compartido de Puertos: Múltiples aplicaciones pueden escuchar en el mismo puerto físico (por ejemplo, :9000), siempre que registren rutas de solicitud distintas (URLs amigables) a través de HTTP.sys.
3. Escalabilidad Nativa: La gestión de conexiones abiertas de larga duración (como Server-Sent Events / EventSource) es manejada por el propio kernel, liberando a la aplicación para procesar reglas de negocio con un consumo de CPU extremadamente bajo.

---

Anatomía del Proyecto de Ejemplo: Dext AirFlow

AirFlow simula un centro de control táctico (Control Tower) que gestiona 40 drones de carga simultáneos. Demuestra la integración entre:

• Un simulador de física y batería que se ejecuta en hilos en segundo plano en Delphi.
• Un Hub de mensajería en tiempo real que distribuye actualizaciones de telemetría solo a los operadores conectados a las regiones de interés.
• Una interfaz web rica y responsiva con micro-animaciones, gráficos dinámicos de consumo y controles bidireccionales interactivos.

Vea a continuación el simulador y el panel de telemetría en acción:

📐 Arquitectura del Backend (Delphi)

El backend es modular y está estructurado en torno al concepto de hilos aislados y endpoints HTTP rápidos:

1. El Simulador (AirFlow.Simulator.pas)

El simulador (TSimulatorThread) se ejecuta de forma asíncrona, actualizando la física de vuelo (Latitud, Longitud, Rumbo, Velocidad y Batería) de 40 drones a una tasa de 5 actualizaciones por segundo (5Hz).

• Thread-Safety: Utiliza un array de comandos síncronos protegido por una sección crítica (TCriticalSection) para recibir comandos de control provenientes del hilo del servidor HTTP.sys sin causar condiciones de carrera (race conditions).
• Envío Eficiente de Telemetría: En cada iteración, la información se formatea y se envía al Dext Hub usando la interfaz IHubContext. Los operadores reciben solo la telemetría de la región que están monitoreando (filtrado por grupos similar a SignalR).

2. Endpoints y Rutas REST (AirFlow.Startup.pas)

El servidor Dext expone rutas tácticas simplificadas utilizando una sintaxis fluida y expresiva:

// Endpoint para activar comandos de retorno a la base (RTL)
App.Builder.MapPost('/api/vehicles/{id}/rtl',
  procedure(Ctx: IHttpContext)
  var
    VehicleId: string;
  begin
    VehicleId := Ctx.Request.GetRouteParam('id');
    Simulator.ForceRTL(VehicleId);
    Ctx.Response.SetStatusCode(200).SendJson('{"status":"RTL_ACK"}');
  end);

---

🎨 Recorrido por las Funcionalidades del Dashboard V2

La interfaz web fue diseñada con una estética cibertáctica premium (glassmorphism y paletas de colores oscuras HSL neón) y presenta las siguientes mecánicas avanzadas:

1. Rastro Histórico de Vuelo (Breadcrumbs Canvas)

• Qué mirar en la pantalla: Detrás de cada marcador redondo de dron en el mapa, verá una línea luminosa que lo sigue como una “cola”.
• Cómo funciona: Un <canvas> superpuesto mantiene un historial circular de las últimas 15 coordenadas de cada dron. A medida que el dron se mueve, el canvas redibuja el rastro aplicando un gradiente de atenuación (fade-out) y un grosor menor en las posiciones más antiguas, creando un efecto de rastro suave. El color del rastro corresponde al estado del dron (Cian para Activo, Amarillo para Warning, Rojo para Parado/Stopped).

2. Indicadores de Incidentes Pulsantes (Warning Rings)

• Qué mirar en la pantalla: Los drones que entran en estado crítico en el mapa comienzan a emitir anillos pulsantes expansivos desde su punto central.
• Cómo funciona: Las animaciones CSS con @keyframes y pseudo-elementos (::after) monitorean el estado de la telemetría recibida en tiempo real. Si el dron cambia al estado Warning, un anillo amarillo pulsa cada 1.2s. Si entra en estado crítico (Stopped), un anillo rojo grueso pulsa rápidamente cada 0.8s, atrayendo la atención del operador directamente hacia el problema.

3. Gráficos Sparkline HUD (Battery Profile)

• Qué mirar en la pantalla: Al hacer clic en un dron para abrir el panel flotante Unit Telemetry, la sección inferior muestra el gráfico de perfil de batería llamado BATTERY TILE PROFILE.
• Cómo funciona: JavaScript monitorea un vector con los últimos 20 niveles de batería reportados para ese dron específico. Un mini-canvas renderiza en tiempo real un gráfico de líneas con área rellena. Si la batería cae por debajo del 60%, el gráfico brilla en amarillo; si cae por debajo del 30%, tanto el gráfico como el relleno brillan en rojo, indicando una degradación inmediata de la energía.

4. Control Táctico Bidireccional (RTL y LAND)

• Qué mirar en la pantalla: Botones neón RTL y LAND en el panel de telemetria HUD de cada dron.
• Cómo funciona:
  • RTL (Return to Base): Al hacer clic, el panel envía un comando POST al servidor. El backend altera el vector de navegación de la simulación. El dron rota su proa directamente hacia las coordenadas de la torre de control central y viaja de regreso. Al acercarse, el simulador inicia la secuencia de aterrizaje automático.
  • LAND: Al hacer clic, la velocidad del dron se reduce a cero inmediatamente. La batería comienza a bajar del 5% en 5% en cada tick, simulando el aterrizaje forzoso, hasta llegar al 0% y cambiar al estado rojo Stopped.

---

Patrones y Buenas Prácticas Adoptados

Extracción de URLs con HTTP.sys en Delphi

Durante la implementación, lidiamos con una característica crucial del wrapper HTTP.sys en Delphi. Los punteros proporcionados por la API nativa de Windows para la URL procesada (CookedUrl.pAbsPath y pQueryString) residen secuencialmente en el mismo segmento de memoria del búfer y no están terminados en nulo. Para extraer rutas y parámetros de consulta sin fugas de datos ni errores de enrutamiento 404, implementamos la extracción explícita de tamaño usando SetString:

// La forma correcta de extraer rutas desde HTTP.sys
SetString(Result, CookedUrl.pAbsPath, CookedUrl.AbsPathLength div SizeOf(WideChar));

Optimización y Fluidez de Renderizado en el Frontend

Para mantener el consumo de CPU bajo en el navegador incluso gestionando 40 drones que se actualizan 5 veces por segundo (200 mensajes/segundo en total), la interfaz web utiliza el patrón de Throttling con RequestAnimationFrame: Los mensajes recibidos por la conexión SSE solo actualizan un diccionario de datos interno. La renderización visual y el reposicionamiento de los elementos del DOM se programan para el siguiente frame disponible del navegador, garantizando animaciones sin interrupciones y un consumo de CPU optimizado.

---

Conclusión

El proyecto Dext AirFlow demuestra que Delphi es perfectamente capaz de soportar arquitecturas modernas tácticas en tiempo real de altísimo rendimiento. Al usar el motor de kernel HTTP.sys, eliminamos capas innecesarias de middleware, ofreciendo a los operadores una experiencia estable, ágil y visualmente excepcional.

¡Siéntase libre de explorar el código fuente y expandir el ejemplo con nuevos parámetros de vuelo y alertas tácticas!

---

Enlaces Útiles y Documentación

Para profundizar en los detalles de implementación y revisar otros ejemplos prácticos de telemetría en el framework, consulte la documentación oficial:

• Código Fuente del Ejemplo: Acceda en GitHub
• Documentación de Telemetría (Dext Book PT-BR): Acceda a los Detalles Técnicos
• Repositorio Oficial de Dext: github.com/cesarliws/dext