ora

¿Quieres el efecto Typewriter de moda para tu chat?

¿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