How can I poll an ajax request in astro

Question

Is there some way I can poll to an endpoint using astro??

I'm currently using SSR to get the data from the endpoint at page request time. But I would like to poll to that endpoint and update the astro component every few seconds. How would I achieve this??

Answer 1

Solution SSE

you can achieve that with SSE Server Sent Event. in this example I update Astro client side from events coming from mqtt client running on the server, so that client can see updates coming without refreshing the page nor keep polling an api.

Example

api

import {logger} from '@/libs/logger.js'
import {SSE_Emitter} from '@/libs/heat_state'

export async function get({request}){

    logger.info("heat_events> get()")
    
    const stream = new ReadableStream({
        start(controller){
            const events_listener = (devices)=>{
                if(controller){
                    logger.verbose("heat_events> SSE_Emitter 'heat'")
                    const data = `data: ${JSON.stringify(devices)}\r\n\r\n`;
                    controller.enqueue(data)
                }else{
                    logger.warn("heat_events> no sse_controller")
                }
            }
            SSE_Emitter.off('heat',events_listener)
            SSE_Emitter.on('heat',events_listener)
        },
        cancel(){
            logger.info("heat_events> cancel() closing")
            if(sse_controller){
                sse_controller.close()
            }
        }
    })

    return new Response(stream, {
        status: 200,
        headers: {
            'Content-Type': 'text/event-stream',
            'Connection': 'keep-alive',
            'Cache-Control': 'no-cache'          
        }
    });
}

client script

function setup_sse(){
        const evtSource = new EventSource("/api/heat_events")
    
        evtSource.onmessage = (event) => {
            dispatch_heat_state(JSON.parse(event.data))
        }
        evtSource.onerror = (err) => {
              console.error("EventSource failed:", err);
              evtSource.close();
        };  
    }
    setup_sse()

Reference example

as it is more practicale to see the above code in real example, here reference in a full project with the above code

• api ReadableStream https://github.com/MicroWebStacks/astro-home-control/blob/d81c4cd37bee4466428c75bc2c1d406b61a9db5f/src/pages/api/heat_events.js#L8
• client event source https://github.com/MicroWebStacks/astro-home-control/blob/d81c4cd37bee4466428c75bc2c1d406b61a9db5f/src/pages/index.astro#L59