Rust からのイベントを受信する (listen)

Rust 側から任意のタイミングでフロントエンドにメッセージを送る「イベントシステム」の実装方法を解説します。
長い処理の進捗通知や、システムイベントの通知などに適しています。

Rust 側の実装 (Emit)

UserAttentionType や Window を使ってイベントを発火 (emit) します。
Tauri v2 では tauri::Emitter トレイトを使用します。

use tauri::Emitter;

#[tauri::command]
fn start_process(app: tauri::AppHandle) {
    std::thread::spawn(move || {
        // 何か重い処理...
        std::thread::sleep(std::time::Duration::from_secs(1));
        
        // イベント "download-progress" を発火
        app.emit("download-progress", 50).unwrap();
        
        std::thread::sleep(std::time::Duration::from_secs(1));
        
        // 完了
        app.emit("download-progress", 100).unwrap();
    });
}

フロントエンド側の実装 (Listen)

@tauri-apps/api/event の listen 関数を使用します。
コンポーネントのアンマウント時にリスナーを解除 (unlisten) するのを忘れないでください。

import { listen } from '@tauri-apps/api/event';

// ペイロードの型定義
type ProgressPayload = number;

async function setupEventListener() {
  // 'download-progress' イベントをリッスン
  // 戻り値は unlisten 用の関数
  const unlisten = await listen<ProgressPayload>('download-progress', (event) => {
    console.log(`Progress: ${event.payload}%`);
  });

  // リスナーを解除する場合:
  // unlisten();
}

setupEventListener();