mirror of
https://github.com/DioxusLabs/dioxus
synced 2024-11-27 06:30:20 +00:00
finish server function docs
This commit is contained in:
parent
515aee6c3c
commit
ab1de6e53f
4 changed files with 163 additions and 11 deletions
|
@ -31,11 +31,11 @@ fn main() {
|
||||||
// Render the application. This will serialize the root props (the intial count) into the HTML
|
// Render the application. This will serialize the root props (the intial count) into the HTML
|
||||||
.route(
|
.route(
|
||||||
"/",
|
"/",
|
||||||
get(move |Path(intial_count): Path<usize>, State(ssr_state): State<SSRState>| async move { axum::body::Full::from(
|
get(move | State(ssr_state): State<SSRState>| async move { axum::body::Full::from(
|
||||||
ssr_state.render(
|
ssr_state.render(
|
||||||
&ServeConfigBuilder::new(
|
&ServeConfigBuilder::new(
|
||||||
app,
|
app,
|
||||||
intial_count,
|
0,
|
||||||
)
|
)
|
||||||
.build(),
|
.build(),
|
||||||
)
|
)
|
||||||
|
|
|
@ -35,11 +35,11 @@ fn main() {
|
||||||
// Render the application. This will serialize the root props (the intial count) into the HTML
|
// Render the application. This will serialize the root props (the intial count) into the HTML
|
||||||
.route(
|
.route(
|
||||||
"/",
|
"/",
|
||||||
get(move |Path(intial_count): Path<usize>, State(ssr_state): State<SSRState>| async move { axum::body::Full::from(
|
get(move |State(ssr_state): State<SSRState>| async move { axum::body::Full::from(
|
||||||
ssr_state.render(
|
ssr_state.render(
|
||||||
&ServeConfigBuilder::new(
|
&ServeConfigBuilder::new(
|
||||||
app,
|
app,
|
||||||
intial_count,
|
0,
|
||||||
)
|
)
|
||||||
.build(),
|
.build(),
|
||||||
)
|
)
|
||||||
|
@ -77,9 +77,10 @@ fn app(cx: Scope<usize>) -> Element {
|
||||||
button {
|
button {
|
||||||
onclick: move |_| {
|
onclick: move |_| {
|
||||||
to_owned![count];
|
to_owned![count];
|
||||||
|
let sc = cx.sc();
|
||||||
async move {
|
async move {
|
||||||
// Call the server function just like a local async function
|
// Call the server function just like a local async function
|
||||||
if let Ok(new_count) = double_server(*count.current()).await {
|
if let Ok(new_count) = double_server(sc, *count.current()).await {
|
||||||
count.set(new_count);
|
count.set(new_count);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -89,11 +90,23 @@ fn app(cx: Scope<usize>) -> Element {
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
#[server(DoubleServer)]
|
// We use the "getcbor" encoding to make caching easier
|
||||||
async fn double_server(number: usize) -> Result<usize, ServerFnError> {
|
#[server(DoubleServer, "", "getcbor")]
|
||||||
|
async fn double_server(cx: DioxusServerContext, number: usize) -> Result<usize, ServerFnError> {
|
||||||
// Perform some expensive computation or access a database on the server
|
// Perform some expensive computation or access a database on the server
|
||||||
tokio::time::sleep(std::time::Duration::from_secs(1)).await;
|
tokio::time::sleep(std::time::Duration::from_secs(1)).await;
|
||||||
let result = number * 2;
|
let result = number * 2;
|
||||||
|
|
||||||
|
println!(
|
||||||
|
"User Agent {:?}",
|
||||||
|
cx.request_parts().headers.get("User-Agent")
|
||||||
|
);
|
||||||
|
|
||||||
|
// Set the cache control header to 1 hour on the post request
|
||||||
|
cx.responce_headers_mut()
|
||||||
|
.insert("Cache-Control", "max-age=3600".parse().unwrap());
|
||||||
|
|
||||||
println!("server calculated {result}");
|
println!("server calculated {result}");
|
||||||
|
|
||||||
Ok(result)
|
Ok(result)
|
||||||
}
|
}
|
||||||
|
|
137
docs/guide/examples/server_context_state.rs
Normal file
137
docs/guide/examples/server_context_state.rs
Normal file
|
@ -0,0 +1,137 @@
|
||||||
|
#![allow(non_snake_case, unused)]
|
||||||
|
use dioxus::prelude::*;
|
||||||
|
use dioxus_fullstack::prelude::*;
|
||||||
|
|
||||||
|
#[cfg(feature = "ssr")]
|
||||||
|
#[derive(Default, Clone)]
|
||||||
|
struct ServerFunctionState {
|
||||||
|
call_count: std::sync::Arc<std::sync::atomic::AtomicUsize>,
|
||||||
|
}
|
||||||
|
|
||||||
|
fn main() {
|
||||||
|
#[cfg(feature = "web")]
|
||||||
|
dioxus_web::launch_with_props(
|
||||||
|
app,
|
||||||
|
// Get the root props from the document
|
||||||
|
get_root_props_from_document().unwrap_or_default(),
|
||||||
|
dioxus_web::Config::new().hydrate(true),
|
||||||
|
);
|
||||||
|
#[cfg(feature = "ssr")]
|
||||||
|
{
|
||||||
|
use axum::body::Body;
|
||||||
|
use axum::extract::Path;
|
||||||
|
use axum::extract::State;
|
||||||
|
use axum::http::Request;
|
||||||
|
use axum::routing::get;
|
||||||
|
use std::sync::Arc;
|
||||||
|
|
||||||
|
// Register the server function before starting the server
|
||||||
|
DoubleServer::register().unwrap();
|
||||||
|
|
||||||
|
tokio::runtime::Runtime::new()
|
||||||
|
.unwrap()
|
||||||
|
.block_on(async move {
|
||||||
|
let addr = std::net::SocketAddr::from(([127, 0, 0, 1], 8080));
|
||||||
|
axum::Server::bind(&addr)
|
||||||
|
.serve(
|
||||||
|
axum::Router::new()
|
||||||
|
// Serve the dist folder with the static javascript and WASM files created by the dixous CLI
|
||||||
|
.serve_static_assets("./dist")
|
||||||
|
// Register server functions
|
||||||
|
.register_server_fns_with_handler("", |func| {
|
||||||
|
move |State(server_fn_state): State<ServerFunctionState>, req: Request<Body>| async move {
|
||||||
|
let (parts, body) = req.into_parts();
|
||||||
|
let parts: Arc<RequestParts> = Arc::new(parts.into());
|
||||||
|
let mut server_context = DioxusServerContext::new(parts.clone());
|
||||||
|
server_context.insert(server_fn_state);
|
||||||
|
server_fn_handler(server_context, func.clone(), parts, body).await
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.with_state(ServerFunctionState::default())
|
||||||
|
// Connect to the hot reload server in debug mode
|
||||||
|
.connect_hot_reload()
|
||||||
|
// Render the application. This will serialize the root props (the intial count) into the HTML
|
||||||
|
.route(
|
||||||
|
"/",
|
||||||
|
get(move |State(ssr_state): State<SSRState>| async move { axum::body::Full::from(
|
||||||
|
ssr_state.render(
|
||||||
|
&ServeConfigBuilder::new(
|
||||||
|
app,
|
||||||
|
0,
|
||||||
|
)
|
||||||
|
.build(),
|
||||||
|
)
|
||||||
|
)}),
|
||||||
|
)
|
||||||
|
// Render the application with a different intial count
|
||||||
|
.route(
|
||||||
|
"/:initial_count",
|
||||||
|
get(move |Path(intial_count): Path<usize>, State(ssr_state): State<SSRState>| async move { axum::body::Full::from(
|
||||||
|
ssr_state.render(
|
||||||
|
&ServeConfigBuilder::new(
|
||||||
|
app,
|
||||||
|
intial_count,
|
||||||
|
)
|
||||||
|
.build(),
|
||||||
|
)
|
||||||
|
)}),
|
||||||
|
)
|
||||||
|
.with_state(SSRState::default())
|
||||||
|
.into_make_service(),
|
||||||
|
)
|
||||||
|
.await
|
||||||
|
.unwrap();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
fn app(cx: Scope<usize>) -> Element {
|
||||||
|
let mut count = use_state(cx, || *cx.props);
|
||||||
|
|
||||||
|
cx.render(rsx! {
|
||||||
|
h1 { "High-Five counter: {count}" }
|
||||||
|
button { onclick: move |_| count += 1, "Up high!" }
|
||||||
|
button { onclick: move |_| count -= 1, "Down low!" }
|
||||||
|
button {
|
||||||
|
onclick: move |_| {
|
||||||
|
to_owned![count];
|
||||||
|
let sc = cx.sc();
|
||||||
|
async move {
|
||||||
|
// Call the server function just like a local async function
|
||||||
|
if let Ok(new_count) = double_server(sc, *count.current()).await {
|
||||||
|
count.set(new_count);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"Double"
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// We use the "getcbor" encoding to make caching easier
|
||||||
|
#[server(DoubleServer, "", "getcbor")]
|
||||||
|
async fn double_server(cx: DioxusServerContext, number: usize) -> Result<usize, ServerFnError> {
|
||||||
|
// Perform some expensive computation or access a database on the server
|
||||||
|
tokio::time::sleep(std::time::Duration::from_secs(1)).await;
|
||||||
|
let result = number * 2;
|
||||||
|
|
||||||
|
println!(
|
||||||
|
"User Agent {:?}",
|
||||||
|
cx.request_parts().headers.get("User-Agent")
|
||||||
|
);
|
||||||
|
|
||||||
|
// Set the cache control header to 1 hour on the post request
|
||||||
|
cx.responce_headers_mut()
|
||||||
|
.insert("Cache-Control", "max-age=3600".parse().unwrap());
|
||||||
|
|
||||||
|
// Get the server function state
|
||||||
|
let server_fn_state = cx.get::<ServerFunctionState>().unwrap();
|
||||||
|
let call_count = server_fn_state
|
||||||
|
.call_count
|
||||||
|
.fetch_add(1, std::sync::atomic::Ordering::SeqCst);
|
||||||
|
println!("server functions have been called {call_count} times");
|
||||||
|
|
||||||
|
println!("server calculated {result}");
|
||||||
|
|
||||||
|
Ok(result)
|
||||||
|
}
|
|
@ -91,9 +91,11 @@ pub trait DioxusRouterExt<S> {
|
||||||
/// .serve(
|
/// .serve(
|
||||||
/// axum::Router::new()
|
/// axum::Router::new()
|
||||||
/// .register_server_fns_with_handler("", |func| {
|
/// .register_server_fns_with_handler("", |func| {
|
||||||
/// move |headers: HeaderMap, body: Request<Body>| async move {
|
/// move |req: Request<Body>| async move {
|
||||||
/// // Add the headers to the context
|
/// let (parts, body) = req.into_parts();
|
||||||
/// server_fn_handler((headers.clone(),), func.clone(), headers, body).await
|
/// let parts: Arc<RequestParts> = Arc::new(parts.into());
|
||||||
|
/// let server_context = DioxusServerContext::new(parts.clone());
|
||||||
|
/// server_fn_handler(server_context, func.clone(), parts, body).await
|
||||||
/// }
|
/// }
|
||||||
/// })
|
/// })
|
||||||
/// .into_make_service(),
|
/// .into_make_service(),
|
||||||
|
@ -366,7 +368,7 @@ async fn render_handler<P: Clone + serde::Serialize + Send + Sync + 'static>(
|
||||||
Full::from(rendered)
|
Full::from(rendered)
|
||||||
}
|
}
|
||||||
|
|
||||||
/// A default handler for server functions. It will deserialize the request body, call the server function, and serialize the response.
|
/// A default handler for server functions. It will deserialize the request, call the server function, and serialize the response.
|
||||||
pub async fn server_fn_handler(
|
pub async fn server_fn_handler(
|
||||||
server_context: DioxusServerContext,
|
server_context: DioxusServerContext,
|
||||||
function: ServerFunction,
|
function: ServerFunction,
|
||||||
|
|
Loading…
Reference in a new issue