Add hello-world-channel example. (#3)

maacl · web-flow · commit 6b759fea7bcb · 2025-07-30T15:55:46.000+02:00
diff --git a/Cargo.toml b/Cargo.toml
@@ -110,3 +110,7 @@ required-features = ["axum", "tracing"]
 [[example]]
 name = "rocket-hello"
 required-features = ["rocket"]
+
+[[example]]
+name = "rocket-hello-channel"
+required-features = ["rocket"]
diff --git a/examples/hello-world-channel.html b/examples/hello-world-channel.html
@@ -0,0 +1,42 @@
+<!-- This is auto-generated by Datastar. DO NOT EDIT. -->
+
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Datastar SDK Demo</title>
+    <script src="https://unpkg.com/@tailwindcss/browser@4"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/gh/starfederation/datastar@main/bundles/datastar.js"></script>
+</head>
+
+<body class="bg-white dark:bg-gray-900 text-lg max-w-xl mx-auto my-16">
+    <div data-signals-delay="400"
+        class="bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400 rounded-lg px-6 py-8 ring shadow-xl ring-gray-900/5 space-y-2">
+        <div class="flex justify-between items-center">
+            <h1 class="text-gray-900 dark:text-white text-3xl font-semibold">
+                Datastar SDK Demo
+            </h1>
+            <img src="https://data-star.dev/static/images/rocket-64x64.png" alt="Rocket" width="64" height="64" />
+        </div>
+        <p class="mt-2">
+            SSE events will be streamed from the backend to the frontend.
+        </p>
+        <div class="space-x-2">
+            <label for="delay">
+                Delay in milliseconds
+            </label>
+            <input data-bind-delay id="delay" type="number" step="100" min="0"
+                class="w-36 rounded-md border border-gray-300 px-3 py-2 placeholder-gray-400 shadow-sm focus:border-sky-500 focus:outline focus:outline-sky-500 dark:disabled:border-gray-700 dark:disabled:bg-gray-800/20" />
+        </div>
+        <button data-on-click="@get(&#39;/set-delay&#39;)"
+            class="rounded-md bg-sky-500 px-5 py-2.5 leading-5 font-semibold text-white hover:bg-sky-700 hover:text-gray-100 cursor-pointer">
+            Start
+        </button>
+    </div>
+    <div class="my-16 text-8xl font-bold text-transparent" data-on-load="@get(&#39;/hello-world&#39;)"
+        style="background: linear-gradient(to right in oklch, red, orange, yellow, green, blue, blue, violet); background-clip: text">
+        <div id="message">Hello, world!</div>
+    </div>
+</body>
+
+</html>
diff --git a/examples/rocket-hello-channel.rs b/examples/rocket-hello-channel.rs
@@ -0,0 +1,86 @@
+use {
+    core::time::Duration,
+    datastar::prelude::PatchElements,
+    rocket::{
+        Shutdown, State, get, launch,
+        response::{content::RawHtml, stream::Event, stream::EventStream},
+        routes,
+        serde::{Deserialize, json::Json},
+        tokio::sync::watch,
+    },
+};
+
+#[launch]
+fn rocket() -> _ {
+    rocket::build()
+        .mount("/", routes![index, hello_world, set_delay])
+        .manage(watch::channel(Signals { delay: 400 }))
+}
+
+#[get("/")]
+fn index() -> RawHtml<&'static str> {
+    RawHtml(include_str!("hello-world-channel.html"))
+}
+
+const MESSAGE: &str = "Hello, world!";
+
+#[derive(Deserialize, Clone, Debug, Copy)]
+#[serde(crate = "rocket::serde")]
+struct Signals {
+    delay: u64,
+}
+
+#[get("/set-delay?<datastar>")]
+fn set_delay(
+    datastar: Json<Signals>,
+    signals_channel: &State<(watch::Sender<Signals>, watch::Receiver<Signals>)>,
+) {
+    let (tx, _) = &**signals_channel;
+    let _ = tx.send(datastar.into_inner());
+}
+
+#[get("/hello-world")]
+fn hello_world(
+    signals_channel: &State<(watch::Sender<Signals>, watch::Receiver<Signals>)>,
+    mut shutdown: Shutdown,
+) -> EventStream![Event + '_] {
+    let mut rx = signals_channel.inner().1.clone();
+
+    EventStream! {
+        'animation: loop {
+            let delay = rx.borrow().delay;
+
+            for i in 0..=MESSAGE.len() {
+                let elements = format!("<div id='message'>{}</div>", &MESSAGE[0..i]);
+                let patch = PatchElements::new(elements);
+                yield patch.write_as_rocket_sse_event();
+
+                tokio::select! {
+                    biased;
+                    _ = &mut shutdown => {
+                        break 'animation;
+                    }
+                    _ = rocket::tokio::time::sleep(Duration::from_millis(delay)) => {
+                    }
+
+                    result = rx.changed() => {
+                        if result.is_err() {
+                            break 'animation;
+                        }
+                        continue 'animation;
+                    }
+                }
+            }
+
+            tokio::select! {
+                biased;
+                _ = &mut shutdown => break 'animation,
+                result = rx.changed() => {
+                    if result.is_err() {
+                        break 'animation;
+                    }
+                }
+            }
+        }
+    }
+}
