Is it possible to stream html?

[rubiktubik]

I'am using rocket with the htmx library.

#[get("/hellos")]
fn hello() -> (ContentType, String) {
    let output = format!(
        r#"<progress max="{}" value="{}">{}%</progress>"#,
        100, 50, 50
    );
    (ContentType::HTML, output)
}

In my html I have this:

<button hx-get="/hellos" hx-swap="innerHTML" hx-target="#data">
    Load Data
  </button>
  <div id="data"></div>

When I press the button I get:

I See a progress bar under the "Load Data" Button

It would be cool to stream a html progress bar which is updated on the server:

#[get("/hellos")]
fn hello() -> TextStream![(ContentType, String)] {
    TextStream! {
        let mut counter = 0;
        let mut interval = time::interval(Duration::from_secs(1));
        loop {
            let output = format!(r#"<progress max="{}" value="{}">{}%</progress>"#,100,counter,counter);
            yield (ContentType::HTML, output);
            interval.tick().await;
            counter += 1;
        }
    }
}

But this doesn't work. How can I achieve a html stream? Is this even possible?

[SergioBenitez]

This is possible, and your code on the Rocket side is "correct" in that it indeed streams instances of HTML that change every tick, but your code on the HTMX doesn't do what you seem to think it does. The hx-get attribute fetches data at the referenced URL but doesn't do anything special with streaming data. It doesn't update the target HTML. So, you'd need to use a different part of HTMX. Here's the relevant documentation: https://htmx.org/extensions/server-sent-events/. And you'd need to use SSE for this, which is this in Rocket: https://api.rocket.rs/v0.5/rocket/response/stream/struct.EventStream.html.

[rubiktubik]

Hello Sergio,

thank you for your answer!

This is an important part to solve my puzzle especially the part with htmx and SSE.
I also looked at your SSE example https://github.com/rwf2/Rocket/tree/v0.5/examples/chat but it seems that I cannot send html with SSE, only text and JSON.

I also found your examples here

Rocket/examples/responders/src/main.rs

Line 65 in 97992b6

#[get("/progress", rank = 2)]

, so that I can also realize my dream of a streamed server-side progress bar, but a little differently than I thought. :-)

Is it possible to send html partials in a stream?

[SergioBenitez]

You can send any UTF-8 data over SSE, including HTML. Why do you believe you cannot send HTML?

[rubiktubik]

With your help I have found an answer which works:

#[get("/events")]
fn events() -> EventStream![] {
    EventStream! {
        let mut count = 0;
        let mut interval = time::interval(Duration::from_secs(1));
        loop {
        let output = format!(
        r#"<progress max="{}" value="{}">{}%</progress>"#,
        100, count, count
    );
            yield Event::data(output.clone()).id("message");
            interval.tick().await;
            count += 1;
            if count == 100 {
                break;
            }
        }
    }
}

And the corresponding html:

  <div hx-ext="sse" sse-connect="/events" sse-swap="message">
    Contents of this box will be updated in real time
    with every SSE message received from the chatroom.
  </div>

Thank you for quick answers and the rocket framework!