今天簡單的說明Tauri裡面的Event系統

Tauri event system是一個multi-producer multi-consumer communication primitive，允許在前端和後端之間傳遞消息，並且必須在事件處理程序上編寫 payload type check。 Event system透過如同channel般的方法來簡化了從後端到前端的通信。並且Event分為了Global events和Window-specific events

• Global events: 導入event module並使用emit和listen函數來使用全局事件通道
• Window-specific events: 在window module上暴露接口

Event Frontend

Global events:
我們能透過emit和listen函數來使用我們的全局事件channel

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

// 監聽click這個event
const unlisten = await listen('click', (event) => {
  ...
})

// 使用object payload發出來發出我們的click事件
emit('click', {
  theMessage: 'Test!',
})

Window-specific events:

import { appWindow, WebviewWindow } from '@tauri-apps/api/window'

// emit僅對"current window"可見的事件
appWindow.emit('event', { message: 'Tauri is awesome!' })

// 創建一個新的webview窗口並僅向該窗口發出事件
const webview = new WebviewWindow('window')
webview.emit('event')

Event Backend

Global events:

use tauri::Manager;

// payload type必須實現"Serialize"和"Clone"
#[derive(Clone, serde::Serialize)]
struct Payload {
  message: String,
}

fn main() {
  tauri::Builder::default()
    .setup(|app| {
      // 監聽(在任何窗口上發出的)"event-name"
      let id = app.listen_global("event-name", |event| {
        println!("got event-name with payload {:?}", event.payload());
      });
	  
      // 使用"listen_global"返回的"id"取消監聽事件
      // an `once_global` API is also exposed on the `App` struct
      app.unlisten(id);

      // emit the `event-name` event搞前端的所有webview窗口
      app.emit_all("event-name", Payload { message: "Tauri is awesome!".into() }).unwrap();
      Ok(())
    })
    .run(tauri::generate_context!())
    .expect("failed to run app");
}

Window-specific events

use tauri::{Manager, Window};

#[derive(Clone, serde::Serialize)]
struct Payload {
  message: String,
}

// 在命令上初始化一個後台進程，並僅向使用該命令的窗口發出週期性事件
#[tauri::command]
fn init_process(window: Window) {
  std::thread::spawn(move || {
    loop {
      window.emit("event-name", Payload { message: "Tauri is awesome!".into() }).unwrap();
    }
  });
}

fn main() {
  tauri::Builder::default()
    .setup(|app| {
      
      let main_window = app.get_window("main").unwrap();

      // 監聽(在"main"窗口上發出的)"event-name"
      let id = main_window.listen("event-name", |event| {
        println!("got window event-name with payload {:?}", event.payload());
      });
      
      main_window.unlisten(id);

      // 發送"event-name" event到"main"窗口
      main_window.emit("event-name", Payload { message: "Tauri is awesome!".into() }).unwrap();
      Ok(())
    })
    .invoke_handler(tauri::generate_handler![init_process])
    .run(tauri::generate_context!())
    .expect("failed to run app");
}

我們今天簡易的介紹了Tauri Event，在Event System，能幫助我們更方便的傳遞資料並進行通信，大大的降低了開發的複雜度。各位明天再見。