🐥

TauriとLeptosで作るデスクトップアプリ(4)イベントを送受信する

2024/10/05に公開

はじめに

TauriとLeptosでデスクトップアプリを作っていきます。今回は、LeptosフロントエンドとTauriバックエンドの間でイベントを送受信します。

関連記事
環境
  • Windows 11 Home
  • Rust 1.81
  • Tauri 2.0.1

https://tauri.app/

  • Leptos 0.7.0-rc0

https://leptos.dev/

依存パッケージを追加する

イベントリスナーを扱うために、./apps/src-ui/Cargo.toml[dependencies]futuresを追加します。

https://github.com/daizutabi/tauri-leptos-example/blob/0.4/apps/src-ui/Cargo.toml#L6-L12

フロントエンドからイベントを送信する

Leptosフロントエンドクレート./apps/src-ui内のcomponentsモジュールにevent_frontendサブモジュールを作ります。

https://github.com/daizutabi/tauri-leptos-example/blob/0.4/apps/src-ui/src/components/event_frontend.rs

emit_frontend_eventクロージャでイベントを送信します。このときcountの値を取得し、引数に渡します。イベントの名前はfrontendとしました。

このイベントは、Leptosフロントエンドからフロントエンド自身とTauriバックエンドに送信されます。フロントエンドでは、別スレッドでイベントリスナーを実行します。while letループでイベントを待ちます。イベントを受信すると、countの値をインクリメントします。これによって、イベント送信の総数が記録されます。

Tauriバックエンドでイベントを受信するために、./apps/src-tauri内のlibモジュールを更新します。

https://github.com/daizutabi/tauri-leptos-example/blob/0.4/apps/src-tauri/src/lib.rs

ここでは、単にイベントを受信したことを標準出力に表示します。

バックエンドからイベントを送信する

次に、TauriバックエンドからLeptosフロントエンドにイベントを送信します。Leptosフロントエンドクレート./apps/src-ui内のcomponentsモジュールにevent_backendサブモジュールを作ります。

https://github.com/daizutabi/tauri-leptos-example/blob/0.4/apps/src-ui/src/components/event_backend.rs

trigger_backend_eventクロージャが、バックエンドからイベントを送信するトリガーとなります。イベントの受信側は、先ほど作成したevent_frontendと同様に、別スレッドでイベントリスナーを実行します。イベントのペイロードがNoneであれば、イベントの受信を終了します。イベント受信中には、重ねてイベントをトリガーしないように、disabledフラグを立てます。

Tauriバックエンドでイベントを送信するには、./apps/src-tauri内のcommandsモジュールを更新します。

https://github.com/daizutabi/tauri-leptos-example/blob/0.4/apps/src-tauri/src/commands.rs#L1-L18

1ミリ秒おきに1000回イベントを送信します。最後にNoneを送信して、イベントが終了したことを通知します。

動作確認

今回作成したコンポーネントを./apps/src-ui内のappsモジュールに配置したのち、cargo tauri devでアプリケーションを起動します。

event

期待どおりの動作が確認できました。

サンプルコード

今回作成したプロジェクトは以下からダウンロード可能です。

https://github.com/daizutabi/tauri-leptos-example/tree/0.4

GitHubで編集を提案

Discussion