3 个不稳定版本
0.2.1 | 2023年9月9日 |
---|---|
0.2.0 | 2023年7月25日 |
0.1.0 | 2023年7月20日 |
在 WebAssembly 中排名 1132
每月下载量 29 次
12KB
117 行
axum-browser-adapter
一套工具,便于将 Axum 集成到浏览器中
示例
use axum_browser_adapter::{
wasm_request_to_axum_request,
axum_response_to_wasm_response,
wasm_compat,
WasmRequest,
WasmResponse
};
use axum::Router;
use axum::routing::get;
use wasm_bindgen::prelude::wasm_bindgen;
use tower_service::Service;
#[wasm_compat]
pub async fn index() -> &'static str {
"Hello World"
}
#[wasm_bindgen]
pub async fn wasm_app(wasm_request: WasmRequest) -> WasmResponse {
let mut router: Router = Router::new().route("/", get(index));
let request = wasm_request_to_axum_request(&wasm_request).unwrap();
let axum_response = router.call(request).await.unwrap();
let response = axum_response_to_wasm_response(axum_response).await.unwrap();
response
}
与浏览器集成
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="module">
import init, {wasm_app, WasmRequest} from './dist/example.js';
(async function () {
await init();
const wasmRequest = new WasmRequest("GET", "/", {}, undefined);
let response = await wasm_app(wasmRequest);
document.write(response.body)
}())
</script>
</body>
</html>
服务工作者
importScripts("/node_modules/axum-browser-adapter/index.js");
// load the WASM app
self.addEventListener('fetch', (event) => {
event.respondWith((async () => {
const {wasm_app, WasmRequest} = wasm_bindgen;
const request = event.request;
const wasmRequest = await requestToWasmRequest(request, WasmRequest);
const wasmResponse = await wasm_app(wasmRequest);
return wasmResponseToJsResponse(wasmResponse);
})());
});
运行示例
示例位于 /example
- 编译 rust 应用程序为 WASM:
. ./build.sh
- 通过 basic-http-server 或您喜欢的 Web 服务器提供
index.html
依赖关系
~7–10MB
~180K SLoC