TIMERS STUDIO
MASTER YOUR FLOW

Cincuenta pantallas, una sola URL: cómo funciona realmente la sincronización en tiempo real

Entre bastidores de la arquitectura WebSocket de doble ruta que mantiene cincuenta pantallas en perfecto sincronismo con una sincronización inicial inferior a 50ms.

· Technical · 9 min read

El mayor despliegue que he presenciado personalmente involucró 47 pantallas repartidas en tres plantas de un centro de convenciones. Monitores de confianza en cada sala de sesiones paralelas, pantallas de cuenta atrás en los pasillos, un reloj maestro en el salón principal, tableros de escaleta en cada entrada y una superficie de control en una tableta en la mesa de producción. Cada una de esas pantallas mostraba el mismo estado de timer, actualizado dentro del mismo fotograma de animación, desde una única URL de navegador. Cuarenta y siete tally lights, por así decirlo, encendiéndose al unísono. Este es el escenario que quiebra la mayoría de las herramientas de timer basadas en web. No dos pantallas. No cinco. Cuarenta y siete, conectadas sobre una red WiFi del recinto que simultáneamente servía a 2.000 asistentes haciendo streaming, consultando correo electrónico y descargando archivos de presentación. Comprender por qué Timers Studio gestiona este escenario con fiabilidad requiere entender la arquitectura subyacente de su sala de control virtual. El sistema utiliza un enfoque de doble ruta para la sincronización de datos. La primera ruta gestiona datos de estado: configuraciones de timers, ajustes de tema, metadatos de la escaleta, nombres de ponentes, duraciones de segmentos. Estos datos cambian con poca frecuencia y toleran una latencia moderada. Se sincronizan a través de la capa de suscripción en tiempo real de Supabase, que utiliza el mecanismo listen/notify de PostgreSQL para propagar cambios a los clientes conectados. Cuando renombra un timer o cambia el color de un tema, cada pantalla conectada recibe esa actualización en unos cientos de milisegundos. Para datos de estado, esta velocidad es más que adecuada. La segunda ruta gestiona las órdenes de transporte: play, pause, stop, next, previous, rewind y ajustes de tiempo. Estas órdenes necesitan llegar lo más rápido que sea físicamente posible porque afectan a lo que el público y los ponentes ven en la señal de programa. Las órdenes de transporte eluden por completo la base de datos. Viajan a través de un canal de difusión WebSocket dedicado que el servidor retransmite a todos los clientes conectados simultáneamente. El servidor no almacena estas órdenes. Las recibe y las distribuye en abanico de inmediato. Por eso la latencia de transporte permanece por debajo de 10 milisegundos independientemente de la carga de la base de datos, la congestión de red en el canal de estado o la cantidad de pantallas conectadas. Cada monitor de confianza reacciona como si estuviera cableado directamente a la sala de control. La sincronización inicial es la otra pieza crítica. Cuando una nueva pantalla Player se conecta a una sesión, no puede simplemente empezar a recibir actualizaciones incrementales. Necesita el estado completo actual: qué timer está activo, cuánto tiempo queda, cómo es la configuración de visualización, si se está mostrando un mensaje actualmente. Timers Studio entrega esta instantánea completa de estado en menos de 50 milisegundos. El servidor mantiene una representación comprimida del estado actual de la sesión en memoria, y cuando un nuevo cliente se conecta, envía esta instantánea como el primer mensaje WebSocket antes de que comiencen las actualizaciones incrementales. [Probar la experiencia] conectando diez pestañas a la vez y observando cómo todas muestran el mismo fotograma. La importancia práctica de una sincronización inicial rápida es fácil de subestimar hasta que uno se encuentra en un entorno de producción. Las pantallas se desconectan y reconectan a lo largo de un espectáculo. Un técnico de recinto reinicia una pantalla para solucionar un problema de resolución. Alguien cierra accidentalmente una pestaña del navegador y la reabre. Un punto de acceso WiFi se reinicia. En todos estos casos, la pantalla que se reconecta necesita mostrar el estado correcto de inmediato, no después de un spinner de carga, ni después de una barra de progreso, ni después de un intervalo de sondeo de cinco segundos. Menos de 50 milisegundos significa que la pantalla pasa de en blanco a correcta tan rápido que un observador no puede distinguir que alguna vez estuvo desconectada. La tally se enciende y la señal de programa aparece en el mismo instante. Escalar a cincuenta pantallas concurrentes introduce desafíos que la mayoría de los tutoriales sobre WebSockets pasan por alto. El enfoque ingenuo consiste en que el servidor envíe mensajes individuales a cada cliente, lo que supone cincuenta mensajes por cada orden de transporte. Esto escala linealmente y crea una ráfaga de tráfico saliente que puede desbordar el búfer de red del servidor. Timers Studio utiliza un patrón de difusión donde el servidor escribe el mensaje una sola vez en un canal y la infraestructura WebSocket se encarga de la distribución en abanico en la capa de transporte. El coste de CPU del servidor no aumenta significativamente tanto si hay diez como cincuenta clientes conectados. También está la cuestión de las tormentas de reconexión. Si el WiFi de un recinto cae durante 30 segundos y luego se recupera, las cincuenta pantallas intentarán reconectarse simultáneamente. Sin una ingeniería cuidadosa, esta avalancha puede colapsar el servidor WebSocket o crear un efecto de estampida que degrada el rendimiento durante minutos. La lógica de reconexión en Timers Studio utiliza retroceso exponencial con jitter, lo que significa que cada cliente espera un intervalo aleatorio ligeramente diferente antes de reconectarse. Esto distribuye la carga de reconexión a lo largo de varios segundos en lugar de concentrarla en un único instante. Quiero abordar una pregunta que los equipos de producción formulan con frecuencia: ¿qué ocurre si la conexión a internet falla por completo? Las pantallas Player continúan mostrando el último estado conocido. Una cuenta atrás que estaba en marcha sigue contando localmente porque el Player mantiene su propio bucle de animación impulsado por la última marca temporal recibida del servidor. Esto significa que incluso durante una interrupción de red, el público ve un timer que sigue contando, que sigue siendo preciso dentro de la tolerancia de deriva de un único dispositivo durante un período corto. Cuando la conectividad se restablece, el Player se resincroniza automáticamente, corrigiendo cualquier deriva acumulada sin un salto visible. La arquitectura también gestiona con elegancia las condiciones de red heterogéneas. En un recinto real, no todas las pantallas tienen la misma ruta de red. Algunas están en ethernet, algunas en WiFi de 5GHz, algunas en 2,4GHz. Las pantallas en conexiones más rápidas reciben actualizaciones unos milisegundos antes que las pantallas en conexiones más lentas, pero la diferencia es imperceptible porque la latencia absoluta para todas las rutas permanece muy por debajo del umbral de percepción humana. Para los productores de eventos que evalúan si una herramienta basada en web puede manejar su escala, la pregunta relevante no es "¿cuántas pantallas puede soportar?" en abstracto. La pregunta relevante es si la arquitectura fue diseñada para la entrega concurrente en tiempo real o si fue diseñada para un único usuario y luego escalada con sondeo y caché como añadidos posteriores. [Ver la consola en acción] abriendo la URL del Player en múltiples pestañas de navegador simultáneamente. Cada pestaña se comporta exactamente como una pantalla física separada, y la sincronización entre ellas es inmediata y consistente. El despliegue del centro de convenciones que describí al inicio de este artículo funcionó impecablemente durante tres días. Nunca fue necesaria una resincronización manual. Ninguna pantalla mostró un estado incorrecto. El equipo de producción se olvidó por completo de la infraestructura de timers, que es exactamente a lo que la infraestructura debería aspirar. [Lanzar tu primer estudio] y deje que su Master Control Room virtual demuestre lo que cincuenta pantallas sincronizadas pueden hacer por su próximo evento.