Cómo Realizar Polling Usando Señales Angular y la API de Recursos

En este artículo, exploraremos cómo implementar un mecanismo de polling en Angular utilizando señales y la API de recursos. Este enfoque es útil para escenarios donde los datos, como los precios del mercado de valores, se actualizan regularmente, pero no requieren actualizaciones instantáneas. Para nuestro propósito, realizaremos un polling cada 2 minutos, lo cual es suficiente para mantener los datos actualizados sin generar problemas de rendimiento.

¿Qué es el Polling?

El polling es una técnica mediante la cual un cliente consulta a un servidor en intervalos regulares para obtener nuevas actualizaciones. En nuestro caso, decidimos usar un intervalo de 2 minutos para evitar problemas de rendimiento asociados a intervalos más cortos. Aunque existen sistemas basados en push, este enfoque se centrará en el sistema pull/poll.

Código Mínimo Reproducible

Aquí hay un ejemplo de código que demuestra cómo configurar el polling utilizando Angular:

@Component({
  selector: 'app-root',
  imports: [CommonModule],
  template: `
    <div>{{rxResource.value() | json}}</div>
    <hr/>
    <div>{{resource.value() | json}}</div>
  `,
})
export class App {
  http = inject(HttpClient);
  serviceIdSignal: WritableSignal<number> = signal(1);
  rxResource = rxResource({
    request: () => this.serviceIdSignal(),
    loader: ({ request: id }) => {
      return this.http.get(`https://jsonplaceholder.typicode.com/todos/${id}`);
    },
  });

  resource = resource({
    request: () => this.serviceIdSignal(),
    loader: ({ request: id }) => {
      return fetch(`https://jsonplaceholder.typicode.com/todos/${id}`).then(
        (res: any) => res.json()
      );
    },
  });
}

Este código define dos recursos: rxResource y resource, los cuales se basan en la señal serviceIdSignal. Sin embargo, observamos que el código no reacciona correctamente, ya que la señal de entrada permanece igual y no activa el polling.

Solución al Problema

Para habilitar el mecanismo de polling correctamente, necesitamos implementar una lógica que actualice la serviceIdSignal en intervalos regulares. Aquí tienes un enfoque para hacer esto:

1. Usar setInterval: Crea un intervalo que actualizará el ID de servicio cada 2 minutos.
2. Reacción a cambios: Asegúrate de que cuando serviceIdSignal cambie, los recursos se vuelvan a cargar.

Implementación

Aquí te mostramos cómo implementar el polling utilizando setInterval:

ngOnInit() {
  setInterval(() => {
    this.serviceIdSignal.set(Math.floor(Math.random() * 10) + 1); // Simulación de un nuevo ID
  }, 120000); // 120000 ms = 2 minutos
}

Conclusión

Siguiendo estos pasos, podrás implementar un mecanismo de polling efectivo en Angular utilizando señales y la API de recursos. Esto te permitirá mantener tus datos actualizados de manera eficiente y sin comprometer el rendimiento, especialmente en situaciones donde los cambios en los datos no son inmediatos. ¡Prueba este enfoque y ajusta el intervalo de acuerdo a tus necesidades específicas!

Para más detalles y un demo interactivo, puedes visitar el siguiente enlace: Demo en Stackblitz.