diff --git a/examples/use_webtransport/src/main.rs b/examples/use_webtransport/src/main.rs index c85cfa2..52bd825 100644 --- a/examples/use_webtransport/src/main.rs +++ b/examples/use_webtransport/src/main.rs @@ -65,7 +65,7 @@ fn Demo() -> impl IntoView { let transport = transport.clone(); spawn_local(async move { - match transport.create_bidir_stream().await { + match transport.open_bidir_stream().await { Ok(bidir_stream) => { let i = id.get_value(); id.set_value(i + 1); diff --git a/examples/use_webtransport_with_server/client/Cargo.toml b/examples/use_webtransport_with_server/client/Cargo.toml new file mode 100644 index 0000000..f629f2d --- /dev/null +++ b/examples/use_webtransport_with_server/client/Cargo.toml @@ -0,0 +1,16 @@ +[package] +name = "use_webtransport" +version = "0.1.0" +edition = "2021" + +[dependencies] +leptos = { version = "0.5.0-beta2", features = ["nightly", "csr"] } +console_error_panic_hook = "0.1" +console_log = "1" +log = "0.4" +leptos-use = { path = "../..", features = ["docs"] } +web-sys = "0.3" + +[dev-dependencies] +wasm-bindgen = "0.2" +wasm-bindgen-test = "0.3.0" diff --git a/examples/use_webtransport_with_server/client/README.md b/examples/use_webtransport_with_server/client/README.md new file mode 100644 index 0000000..f8d8559 --- /dev/null +++ b/examples/use_webtransport_with_server/client/README.md @@ -0,0 +1,23 @@ +A simple example for `use_webtransport`. + +If you don't have it installed already, install [Trunk](https://trunkrs.dev/) and [Tailwind](https://tailwindcss.com/docs/installation) +as well as the nightly toolchain for Rust and the wasm32-unknown-unknown target: + +```bash +cargo install trunk +npm install -D tailwindcss @tailwindcss/forms +rustup toolchain install nightly +rustup target add wasm32-unknown-unknown +``` + +Then, open two terminals. In the first one, run: + +``` +npx tailwindcss -i ./input.css -o ./style/output.css --watch +``` + +In the second one, run: + +```bash +trunk serve --open +``` \ No newline at end of file diff --git a/examples/use_webtransport_with_server/client/Trunk.toml b/examples/use_webtransport_with_server/client/Trunk.toml new file mode 100644 index 0000000..3e4be08 --- /dev/null +++ b/examples/use_webtransport_with_server/client/Trunk.toml @@ -0,0 +1,2 @@ +[build] +public_url = "/demo/" \ No newline at end of file diff --git a/examples/use_webtransport_with_server/client/index.html b/examples/use_webtransport_with_server/client/index.html new file mode 100644 index 0000000..ae249a6 --- /dev/null +++ b/examples/use_webtransport_with_server/client/index.html @@ -0,0 +1,7 @@ + + + + + + + diff --git a/examples/use_webtransport_with_server/client/input.css b/examples/use_webtransport_with_server/client/input.css new file mode 100644 index 0000000..bd6213e --- /dev/null +++ b/examples/use_webtransport_with_server/client/input.css @@ -0,0 +1,3 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; \ No newline at end of file diff --git a/examples/use_webtransport_with_server/client/rust-toolchain.toml b/examples/use_webtransport_with_server/client/rust-toolchain.toml new file mode 100644 index 0000000..271800c --- /dev/null +++ b/examples/use_webtransport_with_server/client/rust-toolchain.toml @@ -0,0 +1,2 @@ +[toolchain] +channel = "nightly" \ No newline at end of file diff --git a/examples/use_webtransport_with_server/client/src/log_display.rs b/examples/use_webtransport_with_server/client/src/log_display.rs new file mode 100644 index 0000000..7d9e71f --- /dev/null +++ b/examples/use_webtransport_with_server/client/src/log_display.rs @@ -0,0 +1,12 @@ +use leptos::*; + +#[component] +pub fn LogDisplay(#[prop(into)] log: Signal>) -> impl IntoView { + view! { +
+ +
+ } +} diff --git a/examples/use_webtransport_with_server/client/src/main.rs b/examples/use_webtransport_with_server/client/src/main.rs new file mode 100644 index 0000000..52bd825 --- /dev/null +++ b/examples/use_webtransport_with_server/client/src/main.rs @@ -0,0 +1,111 @@ +use leptos::*; +use leptos_use::core::ConnectionReadyState; +use leptos_use::docs::demo_or_body; +use leptos_use::{use_webtransport_with_options, UseWebTransportOptions}; + +mod log_display; +mod stream_bidir; +mod stream_send; + +use log_display::*; +use stream_bidir::*; +use stream_send::*; + +#[component] +fn Demo() -> impl IntoView { + let (datagrams_log, set_datagrams_log) = create_signal(vec![]); + + let id = store_value(0); + + let transport = use_webtransport_with_options( + "https://echo.webtransport.day", + UseWebTransportOptions::default() + .on_open(move || { + set_datagrams_log.update(|log| log.push("Connection opened".to_string())) + }) + .on_close(move || { + set_datagrams_log.update(|log| log.push("Connection closed".to_string())) + }), + ); + + let (text, set_text) = create_signal("".to_string()); + + let on_send_datagrams = { + let transport = transport.clone(); + + move |_| { + set_datagrams_log.update(|log| log.push(format!("Sent datagram: '{}'", text()))); + + transport.send_datagrams(text().as_bytes()); + set_text("".to_string()); + } + }; + + let _ = watch( + transport.datagrams, + move |grams, _, _| { + if let Some(grams) = grams { + set_datagrams_log.update(|log| { + log.push(format!( + "Received datagrams: '{}'", + String::from_utf8(grams.clone()).expect("valid utf8") + )) + }); + } + }, + false, + ); + + let (bidir_streams, set_bidir_streams) = create_signal(vec![]); + + let on_open_bidir_stream = { + let transport = transport.clone(); + + move |_| { + let transport = transport.clone(); + + spawn_local(async move { + match transport.open_bidir_stream().await { + Ok(bidir_stream) => { + let i = id.get_value(); + id.set_value(i + 1); + + set_bidir_streams.update(|s| s.push((i, bidir_stream))); + } + Err(e) => { + set_datagrams_log.update(|log| { + log.push(format!("Failed to open bidir stream: {:?}", e)) + }); + } + } + }); + } + }; + + let ready_state = transport.ready_state; + + view! { + +

Datagrams

+