main.rs 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  1. // This test is used by playwrite configured in the root of the repo
  2. use axum::{extract::ws::WebSocketUpgrade, response::Html, routing::get, Router};
  3. use dioxus::prelude::*;
  4. fn app(cx: Scope) -> Element {
  5. let mut num = use_state(cx, || 0);
  6. cx.render(rsx! {
  7. div {
  8. "hello axum! {num}"
  9. button { onclick: move |_| num += 1, "Increment" }
  10. }
  11. svg {
  12. circle { cx: 50, cy: 50, r: 40, stroke: "green", fill: "yellow" }
  13. }
  14. div {
  15. class: "raw-attribute-div",
  16. "raw-attribute": "raw-attribute-value",
  17. }
  18. div {
  19. class: "hidden-attribute-div",
  20. hidden: true,
  21. }
  22. div {
  23. class: "dangerous-inner-html-div",
  24. dangerous_inner_html: "<p>hello dangerous inner html</p>",
  25. }
  26. input {
  27. value: "hello input",
  28. }
  29. div {
  30. class: "style-div",
  31. color: "red",
  32. "colored text"
  33. }
  34. })
  35. }
  36. #[tokio::main]
  37. async fn main() {
  38. let addr: std::net::SocketAddr = ([127, 0, 0, 1], 3030).into();
  39. let view = dioxus_liveview::LiveViewPool::new();
  40. let app = Router::new()
  41. .route(
  42. "/",
  43. get(move || async move {
  44. Html(format!(
  45. r#"
  46. <!DOCTYPE html>
  47. <html>
  48. <head> <title>Dioxus LiveView with axum</title> </head>
  49. <body> <div id="main"></div> </body>
  50. {glue}
  51. </html>
  52. "#,
  53. glue = dioxus_liveview::interpreter_glue(&format!("ws://{addr}/ws"))
  54. ))
  55. }),
  56. )
  57. .route(
  58. "/ws",
  59. get(move |ws: WebSocketUpgrade| async move {
  60. ws.on_upgrade(move |socket| async move {
  61. _ = view.launch(dioxus_liveview::axum_socket(socket), app).await;
  62. })
  63. }),
  64. );
  65. println!("Listening on http://{addr}");
  66. axum::Server::bind(&addr.to_string().parse().unwrap())
  67. .serve(app.into_make_service())
  68. .await
  69. .unwrap();
  70. }