2

lunatic亚毫秒 Web 框架的LiveView实时视图

 1 year ago
source link: https://www.jdon.com/63303
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

lunatic亚毫秒 Web 框架的LiveView实时视图


Lunatic是受 Erlang 启发的 WebAssembly 运行时通过将 Erlang 的容错和大规模并发与 WebAssembly 基于功能的安全性相结合，它创建了一个强大的编程模型。
Lunatic 是一个单一的可执行文件，可在 Windows、macOS 和 Linux 上运行。它从具有自己的堆/堆栈的 WebAssembly 模块生成轻量级进程。这些进程被抢占式调度在多线程执行器上。

submillisecond-live-view：这是使用lunatic构建的亚毫秒Web 框架的 LiveView 实现。

什么是LiveView
LiveView 通过服务器呈现的 HTML 提供丰富的实时用户体验。
LiveView 编程模型是声明式的：LiveView 中的事件不是说“一旦事件 X 发生，就在页面上更改 Y”，而是可能导致其状态发生变化的常规消息。一旦状态发生变化，LiveView 将重新渲染其 HTML 模板的相关部分并将其推送到浏览器，浏览器以最有效的方式进行自我更新。这意味着开发人员像编写任何其他服务器呈现的 HTML 一样编写 LiveView 模板，LiveView 负责跟踪更改并将相关差异发送到浏览器的艰苦工作。
它因Elixir的Phoenix网络框架而流行。

Rust代码：

use serde::{Deserialize, Serialize};
use submillisecond::{router, static_router, Application};
use submillisecond_live_view::prelude::*;

fn main() -> std::io::Result<()> {
    Application::new(router! {
        "/" => Counter::handler()
        "/static" => static_router!("./static")
    })
    .serve("127.0.0.1:3000")
}

#[derive(Clone, Serialize, Deserialize)]
struct Counter {
    count: i32,
}

impl LiveView for Counter {
    type Events = (Increment, Decrement);

    fn mount(_uri: Uri, _socket: Option<&mut Socket>) -> Self {
        Counter { count: 0 }
    }

    fn render(&self) -> Rendered {
        html! {
            button @click=(Increment) { "Increment" }
            button @click=(Decrement) { "Decrement" }
            p { "Count is " (self.count) }
        }
    }
}

#[derive(Deserialize)]
struct Increment {}

impl LiveViewEvent<Increment> for Counter {
    fn handle(state: &mut Self, _event: Increment) {
        state.count += 1;
    }
}

#[derive(Deserialize)]
struct Decrement {}

impl LiveViewEvent<Decrement> for Counter {
    fn handle(state: &mut Self, _event: Decrement) {
        state.count -= 1;
    }
}

需要Lunatic 运行时以及 wasm32-wasi 目标。

cargo install lunatic-runtime
rustup target add wasm32-wasi

还建议添加一个.cargo/config.toml配置了构建目标和运行器的文件。

# .cargo/config.toml

<p class="indent">[build]
target = "wasm32-wasi"

<p class="indent">[target.wasm32-wasi]
runner = "lunatic"

项目点击标题


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK