Calling Frontend from Tauri Rust
Tauri provides three mechanisms for Rust to communicate with the frontend: the event system, channels, and JavaScript evaluation.
Event System Overview
The event system enables bi-directional communication between Rust and frontend. Best for small data transfers and multi-consumer patterns. Not designed for low latency or high throughput.
Required Imports
use tauri::{AppHandle, Emitter, Manager, Listener, EventTarget};
use serde::Serialize;import { listen, once, emit } from '@tauri-apps/api/event';
import { getCurrentWebviewWindow } from '@tauri-apps/api/webviewWindow';Emitting Events from Rust
Global Events (All Listeners)
Use AppHandle::emit() to broadcast to all listeners:
use tauri::{AppHandle, Emitter};
#[tauri::command]
fn download(app: AppHandle, url: String) {
app.emit("download-started", &url).unwrap();
for progress in [1, 15, 50, 80, 100] {
app.emit("download-progress", progress).unwrap();
}
app.emit("download-finished", &url).unwrap();
}Webview-Specific Events
Target specific webviews with emit_to():
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();
}Filtered Events (Multiple Webviews)
Use emit_filter() for conditional targeting:
use tauri::{AppHandle, Emitter, EventTarget};
#[tauri::command]
fn open_file(app: AppHandle, path: std::path::PathBuf) {
app.emit_filter("open-file", path, |target| match target {
EventTarget::WebviewWindow { label } => label == "main" || label == "file-viewer",
_ => false,
}).unwrap();
}Event Payloads
Custom payloads must implement Serialize and Clone:
use serde::Serialize;
use tauri::{AppHandle, Emitter};
#[derive(Clone, Serialize)]
#[serde(rename_all = "camelCase")]
struct DownloadProgress {
download_id: usize,
chunk_length: usize,
total_size: usize,
}
#[tauri::command]
fn download(app: AppHandle, url: String) {
app.emit("download-progress", DownloadProgress {
download_id: 1,
chunk_length: 150,
total_size: 1000,
}).unwrap();
}Listening in Frontend
Global Event Listeners
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-Specific Listeners
import { getCurrentWebviewWindow } from '@tauri-apps/api/webviewWindow';
const appWebview = getCurrentWebviewWindow();
appWebview.listen<string>('logged-in', (event) => {
localStorage.setItem('session-token', event.payload);
});Managing Listeners
import { listen, once } from '@tauri-apps/api/event';
// Unlisten to prevent memory leaks
const unlisten = await listen('download-started', (event) => {
console.log('download started');
});
unlisten(); // Stop listening when done
// Listen once for one-time events
once('app-ready', (event) => {
console.log('App is ready:', event.payload);
});Listening in Rust
Global and Webview Listeners
use tauri::{Listener, Manager};
tauri::Builder::default()
.setup(|app| {
// Global listener
app.listen("download-started", |event| {
println!("event received: {}", event.payload());
});
// Webview-specific listener
let webview = app.get_webview_window("main").unwrap();
webview.listen("logged-in", |event| {
println!("User logged in: {}", event.payload());
});
Ok(())
})
.run(tauri::generate_context!())
.expect("error while running tauri application")Unlisten and Listen Once
use tauri::Listener;
// Store event ID to unlisten later
let event_id = app.listen("download-started", |event| {
println!("download started");
});
app.unlisten(event_id);
// Conditional unlisten
let handle = app.handle().clone();
app.listen("status-changed", move |event| {
if event.payload() == "\"ready\"" {
handle.unlisten(event.id());
}
});
// Listen once
app.once("ready", |event| {
println!("app is ready: {}", event.payload());
});Channels (High-Throughput Streaming)
For better performance than events, use channels:
Rust Channel Setup
use tauri::{AppHandle, ipc::Channel};
use serde::Serialize;
#[derive(Clone, Serialize)]
#[serde(rename_all = "camelCase", tag = "event", content = "data")]
enum DownloadEvent<'a> {
#[serde(rename_all = "camelCase")]
Started { url: &'a str, download_id: usize, content_length: usize },
#[serde(rename_all = "camelCase")]
Progress { download_id: usize, chunk_length: usize },
#[serde(rename_all = "camelCase")]
Finished { download_id: usize },
}
#[tauri::command]
fn download(app: AppHandle, url: String, on_event: Channel<DownloadEvent>) {
on_event.send(DownloadEvent::Started {
url: &url,
download_id: 1,
content_length: 1000,
}).unwrap();
for _ in 0..10 {
on_event.send(DownloadEvent::Progress {
download_id: 1,
chunk_length: 100,
}).unwrap();
}
on_event.send(DownloadEvent::Finished { download_id: 1 }).unwrap();
}Frontend Channel Usage
import { invoke, Channel } from '@tauri-apps/api/core';
type DownloadEvent =
| { event: 'started'; data: { url: string; downloadId: number; contentLength: number } }
| { event: 'progress'; data: { downloadId: number; chunkLength: number } }
| { event: 'finished'; data: { downloadId: number } };
const onEvent = new Channel<DownloadEvent>();
onEvent.onmessage = (message) => {
switch (message.event) {
case 'started':
console.log(`Download started: ${message.data.url}`);
break;
case 'progress':
console.log(`Progress: ${message.data.chunkLength} bytes`);
break;
case 'finished':
console.log('Download complete!');
break;
}
};
await invoke('download', { url: 'https://example.com/file.json', onEvent });JavaScript Evaluation
Execute JavaScript directly from Rust:
Basic Evaluation
use tauri::Manager;
tauri::Builder::default()
.setup(|app| {
let webview = app.get_webview_window("main").unwrap();
webview.eval("console.log('hello from Rust')")?;
Ok(())
})Evaluation with Data
use tauri::Manager;
#[tauri::command]
fn notify_frontend(app: tauri::AppHandle, message: String) {
if let Some(webview) = app.get_webview_window("main") {
let script = format!("window.showNotification('{}')", message);
webview.eval(&script).unwrap();
}
}Complex Data with serialize-to-javascript
# Cargo.toml
[dependencies]
serialize-to-javascript = "0.1"use serialize_to_javascript::Serialized;
use tauri::Manager;
#[derive(serde::Serialize)]
struct AppState { user: String, logged_in: bool }
#[tauri::command]
fn sync_state(app: tauri::AppHandle) {
let state = AppState { user: "john".to_string(), logged_in: true };
if let Some(webview) = app.get_webview_window("main") {
let serialized = Serialized::new(&state, &Default::default()).into_string();
webview.eval(&format!("window.updateState({})", serialized)).unwrap();
}
}Choosing the Right Method
| Method | Use Case | Performance |
|---|---|---|
Events (emit) | Multi-consumer, broadcast | Moderate |
| Channels | High-throughput streaming, single consumer | High |
| JS Eval | Direct DOM manipulation, no response needed | Low overhead |
Events: Notifying multiple windows, loose coupling, simple status updates.
Channels: File downloads/uploads with progress, real-time streaming, high-frequency updates.
JS Eval: One-off DOM updates, triggering frontend functions directly.
Complete Example: File Watcher
Rust Side
use tauri::{AppHandle, Emitter};
use serde::Serialize;
use std::path::PathBuf;
#[derive(Clone, Serialize)]
#[serde(rename_all = "camelCase")]
struct FileChange { path: String, event_type: String }
#[tauri::command]
fn watch_directory(app: AppHandle, path: PathBuf) {
std::thread::spawn(move || {
loop {
app.emit("file-changed", FileChange {
path: path.to_string_lossy().to_string(),
event_type: "modified".to_string(),
}).unwrap();
std::thread::sleep(std::time::Duration::from_secs(5));
}
});
}Frontend Side
import { listen } from '@tauri-apps/api/event';
import { invoke } from '@tauri-apps/api/core';
type FileChange = { path: string; eventType: string };
await invoke('watch_directory', { path: '/some/directory' });
const unlisten = await listen<FileChange>('file-changed', (event) => {
console.log(`File ${event.payload.eventType}: ${event.payload.path}`);
});
// Cleanup when component unmounts: unlisten();