cover

Server-Sent Events: La Forma Más Simple de Streaming en Tiempo Real


Escuchar este post

Selecciona una voz y genera audio para escuchar este post

ora

¿Quieres el efecto Typewriter de moda para tu chat?

typewriter effect

¿Piensas que podrías implementarlo en tu aplicación web usando WebSockets? 🤨

¡Espera, piénsalo dos veces! 🧐

Hoy en día existe una mejor alternativa. 😳

Server-Sent Events (SSE) es lo de hoy, porque es muy fácil de usar. Envía datos al cliente de manera continua y unidireccional. 🤩 ¡Como chatGPT!

¿Qué son los Server-Sent Events?

Server-Sent Events es un estándar web que permite que un servidor envíe datos en tiempo real a un cliente web manteniendo una conexión HTTP persistente. ✅

A diferencia de WebSockets, SSE es unidireccional: solo el servidor puede enviar datos al cliente.

¿Por qué elegir SSE?

  • Simplicidad: Mucho más fácil de implementar que WebSockets 🙌🏼
  • Reconexión automática: El navegador maneja automáticamente las reconexiones 📣
  • Compatibilidad: Funciona sobre HTTP/HTTPS estándar ⚔
  • Eficiencia: Una sola conexión TCP para múltiples eventos 🐙
  • Soporte nativo: API nativa en todos los navegadores modernos ✅

Servidor de ejemplo

Configurar SSE en el servidor es sorprendentemente simple. 😯

Solo necesitas configurar los headers correctos y enviar datos en el formato adecuado:

// Configurar headers para SSE const headers = { 'Content-Type': 'text/event-stream', 'Cache-Control': 'no-cache', 'Connection': 'keep-alive', 'Access-Control-Allow-Origin': '*' } // Función helper para formatear eventos // 👀 Observa el formato estadarizado. function sendEvent(data, eventType = 'message') { return `event: ${eventType}\\ndata: ${JSON.stringify(data)}\\n\\n` } // Ejemplo de endpoint SSE export async function POST({ request }) { const stream = new ReadableStream({ // <===== Aquí está la mágia 🪄✨ start(controller) { // Enviar evento de conexión controller.enqueue(sendEvent({ status: 'connected', timestamp: new Date().toISOString() }, 'connection')) // Simular streaming de una respuesta de chatbot const message = "¡Hola! ¿En qué puedo ayudarte hoy?" // Enviar carácter por carácter para efecto de escritura message.split('').forEach((char, index) => { setTimeout(() => { controller.enqueue(sendEvent({ chunk: char, complete: index === message.length - 1 }, 'message')) }, index * 50) }) } }) // Solo devolvemos el stream con sus headers 🤷🏻 return new Response(stream, { headers }) }

4 Casos de Uso Perfectos para SSE

1. Chat en Tiempo Real

Perfecto para mostrar mensajes que se escriben carácter por carácter, como ChatGPT:

// Streaming de respuesta de chatbot controller.enqueue(sendEvent({ message: chunk, messageId: 'msg-123', complete: false }));

2. Notificaciones Push

Envía notificaciones instantáneas sin necesidad de polling:

controller.enqueue(sendEvent({ type: 'notification', title: 'Nueva orden recibida', body: 'Tienes una nueva orden #1234' }, 'notification'))

3. Actualizaciones de Progreso

Ideal para mostrar el progreso de tareas largas:

controller.enqueue(sendEvent({ progress: 75, status: 'Procesando archivos...', eta: '2 minutos restantes' }, 'progress'))

4. Feeds en Vivo

Para contenido que se actualiza constantemente:

controller.enqueue(sendEvent({ type: 'news', headline: 'Noticia de última hora', timestamp: new Date().toISOString() }, 'news'))

Manejo de Errores Robusto

Nos provee de estados o status

eventSource.onerror = function(event) { if (eventSource.readyState === EventSource.CLOSED) { console.log('Conexión cerrada por el servidor') } else { console.log('Error de conexión, reintentando...') } }

Limpieza de Recursos

Incluye hooks para limpieza o clean-up

// Siempre cerrar la conexión al salir window.addEventListener('beforeunload', () => { eventSource.close() })

Heartbeat para Conexiones Largas

Compatible con la naturaleza async de JS

// Del lado del servidor setInterval(() => { controller.enqueue(sendEvent({ type: 'heartbeat' }, 'ping')) }, 30000) // Cada 30 segundos

Server-Sent Events es una tecnología poderosa y ampliamente subestimada. 🤯

Puede resolver muchos casos de uso de tiempo real con una fracción de la complejidad de WebSockets. 😱

Si tu aplicación necesita que el servidor envíe datos al cliente de manera continua, SSE debería ser tu primera opción. 🤓

La próxima vez que necesites implementar notificaciones en tiempo real, streaming de contenido, o actualizaciones de progreso, recuerda: SSE puede ser exactamente lo que necesitas, sin la complejidad adicional.

Abrazo. Bliss.

Enlaces relacionados

Estándares web

Mozilla Doc

meta cover

White Noise

Checa este otro Post

meta cover

¿Qué es un agente AI?

Checa este otro Post

¡Nuevo curso!

Animaciones web con React + Motion 🧙🏻