Dioxus框架中Liveview

Liveview

Liveview允许应用程序在服务器上_运行_并在浏览器中_渲染_。它使用WebSockets在服务器和浏览器之间进行通信。

示例:

  • 简单示例

支持

Dioxus Liveview将在未来的版本中迁移到dioxus-fullstack。一旦迁移发生,你可能需要更新你的代码。我们计划使这次迁移尽可能小。

与Web平台相比,Liveview目前在功能上受到限制。Liveview应用程序在服务器上的原生线程中运行。这意味着浏览器API不可用,因此渲染WebGL、Canvas等并不像在Web上那样容易。然而,原生系统API是可访问的,所以流媒体、WebSockets、文件系统等都是可行的API。

路由器集成

目前,Dioxus路由器不与liveview渲染器中的浏览器历史集成。如果你有兴趣为Dioxus贡献这个功能,这个问题在这里被跟踪。

管理延迟

Liveview使得从客户端与服务器通信变得非常方便,但也存在一些缺点。主要是在Dioxus Liveview中,默认情况下每次交互都会通过服务器。

因此,使用liveview渲染器时,你需要非常注意管理延迟。在其他渲染器上足够快的事件,如受控输入,在liveview渲染器中可能会令人沮丧地难以使用。

为了解决这个问题,你可以在liveview应用程序中注入一些JavaScript。如果你使用原始属性作为监听器,你可以注入一些JavaScript,当事件被触发时将被运行:

rust 复制代码
rsx! {
    div {
        input {
            "oninput": "console.log('input changed!')"
        }
    }
}
相关推荐
肥肠可耐的西西公主4 分钟前
前端(AJAX)学习笔记(CLASS 2):图书管理案例以及图片上传
前端·笔记·学习
大胖丫5 分钟前
vue 学习-vite api.js
开发语言·前端·javascript
孙桂月7 分钟前
ES6相关操作(2)
前端·javascript·es6
陈浩源同学7 分钟前
学习 TypeScript 栈和队列数据结构
前端·算法
我这一生如履薄冰~9 分钟前
简单封装一个websocket构造函数
前端·javascript·websocket
fangcaojushi9 分钟前
解决webpack5.54打包图片及图标的问题
前端·vue.js
海盗强9 分钟前
Webpack打包优化
前端·webpack·node.js
星之卡比*11 分钟前
前端面试题---vite和webpack的区别
前端·面试
^^为欢几何^^16 分钟前
npm、pnpm和yarn有什么区别
前端·npm·node.js
AC-PEACE38 分钟前
Vue 中 MVVM、MVC 和 MVP 模式的区别
前端·vue.js·mvc