Leptos 服务器端信号

服务器端信号是 leptos 信号，通过 WebSocket 与服务器端同步。

信号在客户端为只读，可以被服务器写入。这在你需要服务器控制的 UI 实时更新时非常有用。

信号的变化通过 WebSocket 以 json 补丁 的形式发送到客户端。

特性标志

• ssr: 当在服务器上渲染应用时启用 ssr。
• actix: 与 Actix Web 框架的集成。
• axum: 与 Axum Web 框架的集成。

示例

Cargo.toml

[dependencies]
leptos_server_signal = "*"
serde = { version = "*", features = ["derive"] }

[features]
ssr = [
  "leptos_server_signal/ssr",
  "leptos_server_signal/axum", # or actix
]

客户端

use leptos::*;
use leptos_server_signal::create_server_signal;
use serde::{Deserialize, Serialize};

#[derive(Clone, Default, Serialize, Deserialize)]
pub struct Count {
    pub value: i32,
}

#[component]
pub fn App() -> impl IntoView {
    // Provide websocket connection
    leptos_server_signal::provide_websocket("ws://127.0.0.1:3000/ws").unwrap();

    // Create server signal
    let count = create_server_signal::<Count>("counter");

    view! {
        <h1>"Count: " {move || count.get().value.to_string()}</h1>
    }
}

服务器 (Axum)

#[cfg(feature = "ssr")]
pub async fn websocket(ws: WebSocketUpgrade) -> Response {
    ws.on_upgrade(handle_socket)
}

#[cfg(feature = "ssr")]
async fn handle_socket(mut socket: WebSocket) {
    let mut count = ServerSignal::<Count>::new("counter").unwrap();

    loop {
        tokio::time::sleep(Duration::from_millis(10)).await;
        let result = count.with(&mut socket, |count| count.value += 1).await;
        if result.is_err() {
            break;
        }
    }
}