El Problema del Spoiler por Retardo de Transmisión
En transmisiones de torneos competitivos, partidas clasificatorias de alto nivel o eventos especiales, es una práctica habitual configurar un retardo de emisión en OBS Studio (típicamente entre 30 y 120 segundos) para prevenir el espionaje táctico (*stream sniping*).
Sin embargo, esto genera un conflicto grave en la experiencia visual: el chat en vivo llega en tiempo real. Si un espectador reacciona a una jugada que aún no ha salido en pantalla para el resto de la audiencia, el widget del chat en OBS mostrará los comentarios con anticipación, arruinando el factor sorpresa para todos los espectadores.
Arquitectura de Cola FIFO en Memoria (\`delayQueueRef\`)
Para resolver esta desincronización, MultiStream Chat implementa un buffer circular temporal basado en una cola primero en entrar, primero en salir (*First-In, First-Out*):
Funcionamiento Paso a Paso:
arrivedAt = Date.now()\).chatDelayEnabled = true\), el mensaje no se renderiza de inmediato; en su lugar, se añade al array en memoria \delayQueueRef\.$$\\text{Liberar si: } \\text{Date.now()} \\ge \\text{message.arrivedAt} + (\\text{chatDelaySeconds} \\times 1000)$$
\\\`typescript
// Algoritmo de despacho temporal implementado en ChatProvider
useEffect(() => {
if (!chatDelayEnabled || chatDelaySeconds <= 0) return;
const interval = setInterval(() => {
const now = Date.now();
const threshold = now - (chatDelaySeconds * 1000);
// Extraer mensajes cuya antigüedad supere el retardo programado
const readyMessages = delayQueueRef.current.filter(m => m.arrivedAt <= threshold);
if (readyMessages.length > 0) {
delayQueueRef.current = delayQueueRef.current.filter(m => m.arrivedAt > threshold);
dispatchMessagesToUI(readyMessages);
}
}, 250);
return () => clearInterval(interval);
}, [chatDelayEnabled, chatDelaySeconds]);
\\\`
Comunicación Multicasting con \`BroadcastChannel\`
El panel de control del streamer y el widget visual dentro de OBS Studio operan en contextos de navegación completamente separados. Para mantener sincronizada la cola de mensajes y los cambios de configuración sin necesidad de peticiones al servidor, MultiStream Chat utiliza la API estándar de BroadcastChannel:
* \BroadcastChannel("multistream-chat")\: Transmite los mensajes liberados para que el overlay de OBS los dibuje con suavidad y animaciones fluidas.
* \BroadcastChannel("multistream-config")\: Propaga de forma instantánea cualquier ajuste de estilo, tamaño de fuente o modificación del retardo en segundos sin reiniciar la fuente de navegador de OBS.