bench

packages/liveview/examples/axum.rs

@@ -19,32 +19,43 @@ async fn main() {
     let addr: std::net::SocketAddr = ([127, 0, 0, 1], 3030).into();
 
     let view = dioxus_liveview::LiveViewPool::new();
+    let index_page_with_glue = |glue: &str| {
+        Html(format!(
+            r#"
+        <!DOCTYPE html>
+        <html>
+            <head> <title>Dioxus LiveView with axum</title>  </head>
+            <body> <div id="main"></div> </body>
+            {glue}
+        </html>
+        "#,
+        ))
+    };
 
-    let app = Router::new()
-        .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>
-            "#,
-                    glue = dioxus_liveview::interpreter_glue(&format!("ws://{addr}/ws"))
-                ))
-            }),
-        )
-        .route(
-            "/ws",
-            get(move |ws: WebSocketUpgrade| async move {
-                ws.on_upgrade(move |socket| async move {
-                    _ = view.launch(dioxus_liveview::axum_socket(socket), app).await;
-                })
-            }),
-        );
+    let app =
+        Router::new()
+            .route(
+                "/",
+                get(move || async move {
+                    index_page_with_glue(&dioxus_liveview::interpreter_glue(&format!(
+                        "ws://{addr}/ws"
+                    )))
+                }),
+            )
+            .route(
+                "/as-path",
+                get(move || async move {
+                    index_page_with_glue(&dioxus_liveview::interpreter_glue("/ws"))
+                }),
+            )
+            .route(
+                "/ws",
+                get(move |ws: WebSocketUpgrade| async move {
+                    ws.on_upgrade(move |socket| async move {
+                        _ = view.launch(dioxus_liveview::axum_socket(socket), app).await;
+                    })
+                }),
+            );
 
     println!("Listening on http://{addr}");
 

packages/liveview/src/lib.rs

@@ -1,3 +1,7 @@
+#![doc = include_str!("../README.md")]
+#![doc(html_logo_url = "https://avatars.githubusercontent.com/u/79236386")]
+#![doc(html_favicon_url = "https://avatars.githubusercontent.com/u/79236386")]
+
 pub mod adapters {
     #[cfg(feature = "warp")]
     pub mod warp_adapter;
@@ -42,12 +46,47 @@ static MINIFIED: &str = include_str!("./minified.js");
 /// This script that gets injected into your app connects this page to the websocket endpoint
 ///
 /// Once the endpoint is connected, it will send the initial state of the app, and then start
-/// processing user events and returning edits to the liveview instance
-pub fn interpreter_glue(url: &str) -> String {
+/// processing user events and returning edits to the liveview instance.
+///
+/// You can pass a relative path prefixed with "/", or enter a full URL including the protocol
+/// (`ws:` or `wss:`) as an argument.
+///
+/// If you enter a relative path, the web client automatically prefixes the host address in
+/// `window.location` when creating a web socket to LiveView.
+///
+/// ```
+/// // Creates websocket connection to same host as current page
+/// interpreter_glue("/api/liveview");
+///
+/// // Creates websocket connection to specified url
+/// interpreter_glue("ws://localhost:8080/api/liveview");
+/// ```
+pub fn interpreter_glue(url_or_path: &str) -> String {
+    // If the url starts with a `/`, generate glue which reuses current host
+    let get_ws_url = if url_or_path.starts_with('/') {
+        r#"
+  let loc = window.location; 
+  let new_url = "";
+  if (loc.protocol === "https:") {{
+      new_url = "wss:";
+  }} else {{
+      new_url = "ws:";
+  }}
+  new_url += "//" + loc.host + path;
+  return new_url;
+      "#
+    } else {
+        "return path;"
+    };
+
     format!(
         r#"
 <script>
-    var WS_ADDR = "{url}";
+    function __dioxusGetWsUrl(path) {{
+      {get_ws_url}
+    }}
+    
+    var WS_ADDR = __dioxusGetWsUrl("{url_or_path}");
     {MINIFIED}
 </script>
     "#