Leptos服务器端事件

服务器端信号通过服务器发送事件（SSE）与服务器保持同步。

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

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

此项目基于 leptos_server_signal 重度修改。

功能标志

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

示例

Cargo.toml

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

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

客户端

use leptos::*;
use leptos_sse::create_sse_signal;
use serde::{Deserialize, Serialize};

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

#[component]
pub fn App() -> impl IntoView {
    // Provide SSE connection
    leptos_sse::provide_sse("https://127.0.0.1:3000/sse").unwrap();

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

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

如果处于稳定状态，使用 count.get().value 代替 count().value。

服务器（Axum）

#[cfg(feature = "ssr")]
use {
    axum::response::sse::{Event, KeepAlive, Sse},
    futures::stream::Stream,
};

#[cfg(feature = "ssr")]
async fn handle_sse() -> Sse<impl Stream<Item = Result<Event, axum::BoxError>>> {
    use futures::stream;
    use leptos_sse::ServerSentEvents;
    use std::time::Duration;
    use tokio_stream::StreamExt as _;

    let mut value = 0;
    let stream = ServerSentEvents::new(
        "counter",
        stream::repeat_with(move || {
            let curr = value;
            value += 1;
            Ok(Count { value: curr })
        })
        .throttle(Duration::from_secs(1)),
    )
    .unwrap();
    Sse::new(stream).keep_alive(KeepAlive::default())
}

许可证

此作品根据MIT许可证发布。许可证副本可在 LICENSE 文件中找到。