How can I keep calling a server function everytime it returns? (http long polling)

[mamaart]

I want to do http long polling to listen for changes on the server.

And I am wondering how I can make the component keep fetching the resource from the server everytime the server returns either an update or a timeout.

Here is an illustration of the flow.

server == serverfunction

[gbj]

Here's an example I just threw together of an effect that triggers a resource to refetch every time it resolves. If there were something like a forward ref that could be used to pass the resource into its own source signal that would be even more elegant but... this is probably fine?

    let resource = create_resource(
        || (),
        |_| async {
            logging::log!("fetching resource");
            gloo_timers::future::TimeoutFuture::new(500).await;
            logging::log!("loaded resource");
        },
    );
    create_effect(move |prev| {
        resource.track();
        if prev.is_some() {
            resource.refetch();
        }
    });

[mamaart]

Thank you for your response!

I was playing around with these funcitons

• create_resource
• create_memo
• create_action
• watch

an example of what I did was:

let e = create_resource(
    || (),
    move |_| async move {
        match total_members().await {
            Ok(x) => {
                logging::log!("TOTAL MEMBERS: {:?}", x);
                x
            }
            Err(err) => {
                logging::log!("ERROR: {:?}", err);
                0
            }
        }
    },
);

let action = create_action(move |_: &()| async move {
    let amount = { move || e.get().unwrap_or_default() };
    match listen().await {
        Ok(x) => {
            logging::log!("UPDATE: {:?}", x);
            e.set(amount() + 1);
        }
        Err(err) => {
            logging::log!("failed while listening: {err}");
            let amount = amount();
            if amount > 0 {
                e.set(amount - 1);
            }
        }
    }
});

let amount = create_memo(move |_| {
    action.dispatch(());
    e.get().unwrap_or_default()
});

But I always got some warning in the console related to how I was using it:

My current setup

The last method works and I don't get any warnings:

let (amount, set_amount) = create_signal(0);

spawn_local(async move {
    // fetching initial value and remembering it in this scope
    let mut amount = total_members().await.unwrap_or_default();
    set_amount(amount);

    loop {
        // listen will return if there is an update or after 30 seconds
        let _ = listen()
            .await
            .map(|e| {
                match e {
                    common::members::ChangeType::Created => {
                        amount = amount + 1;
                        set_amount(amount);
                    }
                    common::members::ChangeType::Deleted => {
                        if amount > 0 {
                            amount = amount - 1;
                            set_amount(amount);
                        }
                    }
                }
                logging::log!("UPDATE: {:?}", amount);
            })
            .map_err(|err| {
                // probably timeout
                logging::log!("ERROR: {:?}", err);
            });
    }
});

I am gonna change the response so that I know when timeout occurs. and stops the loop if an actual error occurs

[dgsantana]

An alternative is to use websockets, you can use leptos-use, and axum "ws" feature, this allows to have a endpoit that creates a socket to the client. Maybe it's lighter? I use for some server metrics on the backend for memory and cpu, with a 100ms pool rate.

[mamaart]

@dgsantana Thank you for your response!

I don't feel a need for websockets since I am just adding some observability which is not gonna be streamed with that high frequency.

If my frequency of streaming was high I would try out this new interesting technology called WebTransport over HTTP/3

[dgsantana]

Interesting, will also look into that.