https://github.com/tqwewe/leptos_server_signal

Leptos server signals synced through websockets
https://github.com/tqwewe/leptos_server_signal

Last synced: 1 day ago
JSON representation

Leptos server signals synced through websockets

• Host: GitHub
• URL: https://github.com/tqwewe/leptos_server_signal
• Owner: tqwewe
• License: mit
• Created: 2023-05-03T11:35:01.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-12-27T06:08:30.000Z (16 days ago)
• Last Synced: 2025-01-03T17:18:10.919Z (8 days ago)
• Language: Rust
• Size: 43.9 KB
• Stars: 59
• Watchers: 1
• Forks: 12
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-leptos - leptos-server-signal

README

        
**Leptos Server Signals**

Server signals are [leptos] [signals] kept in sync with the server through websockets.

The signals are read-only on the client side, and can be written to by the server.

This is useful if you want real-time updates on the UI controlled by the server.

Changes to a signal are sent through a websocket to the client as [json patches].

[leptos]: https://crates.io/crates/leptos

[signals]: https://docs.rs/leptos/latest/leptos/struct.Signal.html

[json patches]: https://docs.rs/json-patch/latest/json_patch/struct.Patch.html

## Feature flags

- `ssr`: ssr is enabled when rendering the app on the server.

- `actix`: integration with the [Actix] web framework.

- `axum`: integration with the [Axum] web framework.

[actix]: https://crates.io/crates/actix-web

[axum]: https://crates.io/crates/axum

# Example

**Cargo.toml**

```toml

[dependencies]

leptos_server_signal = "*"

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

[features]

ssr = [

  "leptos_server_signal/ssr",

  "leptos_server_signal/axum", # or actix

]

```

**Client**

```rust

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://localhost:3000/ws").unwrap();

    // Create server signal

    let count = create_server_signal::("counter");

    view! {

        
"Count: " {move || count.get().value.to_string()}

    }

}

```


**Server (Axum)**

```rust

#[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::::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;

        }

    }

}

```

# Connection Retry

With the example above, the connection does not get reestablished after a connection lost.

To regularly try to reconnect again, the function `provide_websocket_with_retry(...)` can

be used:

```rust

#[component]

pub fn App() -> impl IntoView {

    // Provide websocket connection

    leptos_server_signal::provide_websocket_with_retry(

        "ws://localhost:3000/ws",

        5000, // retry in 5000 milliseconds

    ).unwrap();

    // ... code from above

}

```