| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960 |
- // ANCHOR: all
- use axum::{extract::ws::WebSocketUpgrade, response::Html, routing::get, Router};
- use dioxus::prelude::*;
- // ANCHOR: glue
- #[tokio::main]
- async fn main() {
- let addr: std::net::SocketAddr = ([127, 0, 0, 1], 3030).into();
- let view = dioxus_liveview::LiveViewPool::new();
- let app = Router::new()
- // The root route contains the glue code to connect to the WebSocket
- .route(
- "/",
- get(move || async move {
- Html(format!(
- r#"
- <!DOCTYPE html>
- <html>
- <head> <title>Dioxus LiveView with Axum</title> </head>
- <body> <div id="main"></div> </body>
- {glue}
- </html>
- "#,
- // Create the glue code to connect to the WebSocket on the "/ws" route
- glue = dioxus_liveview::interpreter_glue(&format!("ws://{addr}/ws"))
- ))
- }),
- )
- // The WebSocket route is what Dioxus uses to communicate with the browser
- .route(
- "/ws",
- get(move |ws: WebSocketUpgrade| async move {
- ws.on_upgrade(move |socket| async move {
- // When the WebSocket is upgraded, launch the LiveView with the app component
- _ = view.launch(dioxus_liveview::axum_socket(socket), app).await;
- })
- }),
- );
- println!("Listening on http://{addr}");
- axum::Server::bind(&addr.to_string().parse().unwrap())
- .serve(app.into_make_service())
- .await
- .unwrap();
- }
- // ANCHOR_END: glue
- // ANCHOR: app
- fn app(cx: Scope) -> Element {
- cx.render(rsx! {
- div {
- "Hello, world!"
- }
- })
- }
- // ANCHOR_END: app
- // ANCHOR_END: all
|
