【Rust＋Tauri＋React】RustからReactにEventを配信する方法

$ npm create tauri-app@latest event-example
npx: 2個のパッケージを2.682秒でインストールしました。
✔ Choose which language to use for your frontend · TypeScript / JavaScript - (pnpm, yarn, npm)
✔ Choose your package manager · npm
✔ Choose your UI template · React - (https://reactjs.org/)
✔ Choose your UI flavor · TypeScript

$ cd event-example
$ npm install
$ npm run tauri dev

// event-example/src-tauri/src/main.rs

// Prevents additional console window on Windows in release, DO NOT REMOVE!!
#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]

use tauri::Window;

// Learn more about Tauri commands at https://tauri.app/v1/guides/features/command
#[tauri::command]
fn greet(window: Window) {
    let num = rand::random::();
    window.emit("get-number", num).unwrap();
}

fn main() {
    tauri::Builder::default()
        .invoke_handler(tauri::generate_handler![greet])
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

// event-example/src-tauri/Cargo.toml

[package]
name = "event-example"
version = "0.0.0"
description = "A Tauri App"
authors = ["you"]
license = ""
repository = ""
edition = "2021"
rust-version = "1.57"

# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html

[build-dependencies]
tauri-build = {version = "1.2", features = [] }
cxx-build = {version = "1.0"}
cc = {version = "1.0.78"}

[dependencies]
serde_json = "1.0"
serde = { version = "1.0", features = ["derive"] }
tauri = {version = "1.2", features = ["api-all"] }
tiff = { version = " 0.8.1"}
cxx = { version = "1.0"}
url = { version = "2", features = ["serde"] }

[features]
# by default Tauri runs in production mode
# when `tauri dev` runs it is executed with `cargo run --no-default-features` if `devPath` is an URL
default = [ "custom-protocol" ]
# this feature is used used for production builds where `devPath` points to the filesystem
# DO NOT remove this
custom-protocol = [ "tauri/custom-protocol" ]
[profile.dev]
opt-level = 0

[profile.release]
opt-level = 3
debug = false

[build]
target-dir = "dist"
rustflags = ["-C", "link-arg=-s"]

import { useState } from "react";
import { listen } from "@tauri-apps/api/event";
import { invoke } from "@tauri-apps/api/tauri";
import "./App.css";
function App() {
const [number, setNumber] = useState(0);
async function greet() {
const unlisten = await listen<number>("get-number", (event) => {
setNumber(event.payload);
unlisten();
});
invoke("greet");
}
return (
<div>
<button onClick={greet}>Press</button>
<p>{number}</p>
</div>
);
}
export default App;

$ npm run tauri dev