【一起学Rust | 框架篇 | Tauri2.0框架】tauri中rust和前端的相互调用(rust调用前端)

文章目录

    • 前言
    • [1. rust中调用前端](#1. rust中调用前端)
    • [2. 如何向前端发送事件](#2. 如何向前端发送事件)
    • [3. 前端监听事件](#3. 前端监听事件)
    • [4. 执行js代码](#4. 执行js代码)

前言

近期Tauri 2.0 rc版本发布,2.0版本迎来第一个稳定版本,同时官方文档也进行了更新。Tauri是一个使用Rust构建的框架,可以让你使用前端技术来构建桌面应用程序。

在先前的开发工作中,由于Tauri本身有整合浏览器的能力,有相当多的部分是在前端能力的基础上实现的,比如说web serial api,又或者web camera api,这些api在前端中调用是相当容易的,但是容易使用并不代表它就一定是可靠的,比如web serial api的断帧问题就无解,即使你写循环去补,也会出现错帧的情况,对于小数据来说已经完全够用了(30个字节以下),对于数据量稍微多一点,就要分帧处理,且很混乱。所以,对于这种东西,最好也就是使用rust来实现了。当然,tauri也并不是一直都好的,tauri官方做出一堆插件,这些插件很容易就可以使用,相当于用户只需要关心前端开发,但是这些插件有些使用的谷歌服务,谷歌服务在国内无法访问,所以体验也不好。这也不好,那也不好,究竟怎么才能行呢?期待tauri以后能解决这些问题,起码就目前而言,调用rust能力是个比较靠谱一点的方案,可惜东西需要自己写。

吐槽完毕,开始进入正题。

在使用tauri进行开发时,前后端通信是相当重要的,可以说是贯穿应用开发的整个流程,所以,在此之前,你需要了解tauri前后端是如何通信的。官方在更新了v2的文档后,提供了如下图片,很清晰,轻松就能看懂。

从图上可以看出,tauri的事件是可以双向传递的,这就对前后端通信很有帮助,一旦你理解了这个图,tauri开发你就懂了一大半了。

1. rust中调用前端

根据前面图中的描述,我们可以知道,要想在rust中调用前端的方法,要在rust中向前端发送一个事件,前端监听这个事件,当前端监听到这个事件后,前端就可以进行相应的处理,这样就实现了rust调用前端的功能。

要实现这些功能,那么就需要解决以下问题:

  1. 如何向前端发送事件
  2. 前端如何监听事件

我们来挨个解决这些问题。

2. 如何向前端发送事件

向前端发送事件的能力是由AppHandle来提供的,AppHandle是tauri的核心,它提供了很多能力,包括前后端通信,窗口管理,应用生命周期管理等等。所以,要向前端发送事件,就需要先获取到AppHandle。

获取AppHandle的方式很简单,不需要我们手动来加很多东西,只要在command中添加参数,在程序执行的时候会自动注入AppHandle,然后我们就可以直接使用AppHandle了。

在获取到AppHandle后,可以调用emit方法来触发前端事件,emit方法接受两个参数,第一个参数是事件名,第二个参数是事件数据,事件数据可以是任意类型,tauri会自动将数据转换为前端可以识别的数据类型。

以下是示例代码

rust 复制代码
#[tauri::command]
fn send_event(app_handle: tauri::AppHandle, message: String) {
    app_handle.emit("rust_event", message).unwrap();
}

事件负载数据最好使用struct,因为官方就是这么做的,struct支持序列化,且代码美观,易读懂。

rust 复制代码
#[derive(Clone, Serialize)]
#[serde(rename_all = "camelCase")]
struct DownloadStarted<'a> {
  url: &'a str,
  download_id: usize,
  content_length: usize,
}

在这里有一点是要注意的,也是可能你很需要的,就是触发事件分为

  1. 触发全局事件
  2. 触发指定Webview的事件

上述给的例子就是触发全局事件,你只要在webview中监听这个事件,就可以触发这个事件,如果你想要指定,那么要使用emit_to方法,这个方法接受三个参数,第一个参数是事件名,第二个参数是webview的id,第三个参数是事件数据,webview的id可以通过tauri::Window来获取,tauri::Window可以通过tauri::WindowBuilder来创建,tauri::WindowBuilder可以通过tauri::Builder来创建,tauri::Builder可以通过tauri::Builder::default()来创建。

以下是示例代码

rust 复制代码
use tauri::{AppHandle, Emitter};

#[tauri::command]
fn login(app: AppHandle, user: String, password: String) {
  let authenticated = user == "tauri-apps" && password == "tauri";
  let result = if authenticated { "loggedIn" } else { "invalidCredentials" };
  app.emit_to("login", "login-result", result).unwrap();
}
rust 复制代码
use tauri::{Emitter, EventTarget};

#[tauri::command]
fn download(app: tauri::AppHandle) {
  for i in 1..100 {
    std::thread::sleep(std::time::Duration::from_millis(150));
    // emit a download progress event to all listeners
    app.emit_to(EventTarget::any(), "download-progress", i);
    // emit an event to listeners that used App::listen or AppHandle::listen
    app.emit_to(EventTarget::app(), "download-progress", i);
    // emit an event to any webview/window/webviewWindow matching the given label
    app.emit_to("updater", "download-progress", i); // similar to using EventTarget::labeled
    app.emit_to(EventTarget::labeled("updater"), "download-progress", i);
    // emit an event to listeners that used WebviewWindow::listen
    app.emit_to(EventTarget::webview_window("updater"), "download-progress", i);
  }
}

或者使用 emit_filter来指定

rust 复制代码
use tauri::{Emitter, EventTarget};

#[tauri::command]
fn download(app: tauri::AppHandle) {
  for i in 1..100 {
    std::thread::sleep(std::time::Duration::from_millis(150));
    // emit a download progress event to the updater window
    app.emit_filter("download-progress", i, |t| match t {
      EventTarget::WebviewWindow { label } => label == "main",
      _ => false,
    });
  }
}

指定窗口label需要创建多个窗口,这个目前还未涉及到,后面更新文章添加相关管内容(多窗口管理)。

3. 前端监听事件

在tauri中前端监听事件是非常容易的,tauri导出了一个listen对象,可以监听事件,在使用的时候绑定你所需要的方法就好了。

以下是示例代码(监听全局事件)

ts 复制代码
import { listen } from '@tauri-apps/api/event';

type DownloadStarted = {
  url: string;
  downloadId: number;
  contentLength: number;
};

listen<DownloadStarted>('download-started', (event) => {
  console.log(
    `downloading ${event.payload.contentLength} bytes from ${event.payload.url}`
  );
});

监听指定webview的事件

ts 复制代码
import { getCurrentWebviewWindow } from '@tauri-apps/api/webviewWindow';

const appWebview = getCurrentWebviewWindow();
appWebview.listen<string>('logged-in', (event) => {
  localStorage.setItem('session-token', event.payload);
});

监听事件这个对象会在应用的整个生命周期监听事件,如果需要不监听了,那么你可以接受监听事件的返回值,执行

ts 复制代码
import { listen } from '@tauri-apps/api/event';

const unlisten = await listen('download-started', (event) => {});
unlisten();

如果监听的事件只需要执行一次,那么只需要调用once方法即可

ts 复制代码
import { once } from '@tauri-apps/api/event';
import { getCurrentWebviewWindow } from '@tauri-apps/api/webviewWindow';

once('ready', (event) => {});

const appWebview = getCurrentWebviewWindow();
appWebview.once('ready', () => {});

后续还有通道channel,支持大数据传输,这个目前还未涉及到,也没有找到应用场景,如果遇到了我会写一下这里的坑。

4. 执行js代码

既然是webview,肯定少不了执行js代码的部分(很期待能控制网络请求,那可就太爽了),通过这个,一些网页自动化插件什么的,很轻松就能实现了,我觉得后面可以做个玩玩。

以下是示例代码

rust 复制代码
use tauri::Manager;

tauri::Builder::default()
  .setup(|app| {
    let webview = app.get_webview_window("main").unwrap();
    webview.eval("console.log('hello from Rust')")?;
    Ok(())
  })

前端调用rust可以使用command,也可以使用event,这个内容放到下期。(你英文好的话也可以直接看官方文档。)

相关推荐
Json_1817901448013 分钟前
电商拍立淘按图搜索API接口系列,文档说明参考
前端·数据库
风尚云网36 分钟前
风尚云网前端学习:一个简易前端新手友好的HTML5页面布局与样式设计
前端·css·学习·html·html5·风尚云网
木子020438 分钟前
前端VUE项目启动方式
前端·javascript·vue.js
GISer_Jing41 分钟前
React核心功能详解(一)
前端·react.js·前端框架
捂月44 分钟前
Spring Boot 深度解析:快速构建高效、现代化的 Web 应用程序
前端·spring boot·后端
深度混淆1 小时前
实用功能,觊觎(Edge)浏览器的内置截(长)图功能
前端·edge
Smartdaili China1 小时前
如何在 Microsoft Edge 中设置代理: 快速而简单的方法
前端·爬虫·安全·microsoft·edge·社交·动态住宅代理
秦老师Q1 小时前
「Chromeg谷歌浏览器/Edge浏览器」篡改猴Tempermongkey插件的安装与使用
前端·chrome·edge
滴水可藏海1 小时前
Chrome离线安装包下载
前端·chrome
m51271 小时前
LinuxC语言
java·服务器·前端