Recientemente, me embarqué en un proyecto donde necesitaba integrar Azure EventHub en una aplicación construida con Astro, utilizando React en el frontend y Next.js en el backend. Quiero compartir cómo logré esta integración, especialmente enfocándome en cómo leer datos desde una tabla en Azure Storage Account y cómo producir y consumir eventos con Azure EventHub.
Comencemos por el backend. Tenía una función que necesitaba leer datos de una tabla en Azure Storage Account y luego enviar uno de esos registros como un evento a Azure EventHub. Aquí está el código esencial de esa función:
Este código comienza verificando una autorización básica, luego conecta con Azure Table Storage para obtener las entidades almacenadas. Después de asegurarse de que hay suficientes datos, selecciona una entidad aleatoria y la envía como un evento a Azure EventHub utilizando EventHubProducerClient.
Ahora, en el backend también necesitaba una forma de consumir esos eventos y proporcionarlos al frontend. Para ello, utilicé el siguiente código:
Esta función se conecta a Azure EventHub utilizando EventHubConsumerClient, suscribiéndose al flujo de eventos y recopilando las notificaciones. Después de un breve periodo, cierra la conexión y devuelve las notificaciones más recientes.
En el frontend, quería mostrar estas notificaciones al usuario. Utilicé Astro con React para construir la interfaz. Aquí está el componente React principal:
Este componente maneja la autenticación del usuario y muestra las notificaciones obtenidas desde el backend. Utiliza useEffect para llamar a la API de notificaciones cuando el usuario está autenticado.
La clave aquí es cómo el frontend interactúa con el backend para obtener las notificaciones que hemos consumido de Azure EventHub. Al hacer una solicitud a nuestra ruta API /api/notification, obtenemos las últimas notificaciones y las mostramos al usuario.
Este enfoque me permitió integrar Azure EventHub de manera eficiente en mi aplicación, utilizando Astro con React en el frontend y Next.js en el backend. La comunicación entre el frontend y el backend es fluida, y Azure EventHub maneja el flujo de eventos de forma robusta.