事件系統
使用事件系統在元件之間通訊
事件系統
Wails 提供用於發布/訂閱通訊的統一事件系統。您可以在任何位置發出及監聽事件——從 Go 到 JavaScript、從 JavaScript 到 Go,以及從視窗到視窗——透過具型別的事件和生命週期掛鉤實現解耦架構。
快速入門
Go(發出):
go
app.Event.Emit("user-logged-in", map[string]interface{}{
"userId": 123,
"name": "Alice",
})JavaScript(監聽):
javascript
import { Events } from '@wailsio/runtime'
Events.On("user-logged-in", (event) => {
console.log(`User ${event.data.name} logged in`)
})就這麼簡單!跨語言發布/訂閱。
事件類型
自訂事件
應用程式專屬的事件:
go
// Emit from Go
app.Event.Emit("order-created", order)
app.Event.Emit("payment-processed", payment)
app.Event.Emit("notification", message)javascript
// Listen in JavaScript
Events.On("order-created", handleOrder)
Events.On("payment-processed", handlePayment)
Events.On("notification", showNotification)系統事件
內建的作業系統與應用程式事件:
go
import "github.com/wailsapp/wails/v3/pkg/events"
// Theme changes
app.Event.OnApplicationEvent(events.Common.ThemeChanged, func(e *application.ApplicationEvent) {
if e.Context().IsDarkMode() {
app.Logger.Info("Dark mode enabled")
}
})
// Application lifecycle
app.Event.OnApplicationEvent(events.Common.ApplicationStarted, func(e *application.ApplicationEvent) {
app.Logger.Info("Application started")
})視窗事件
視窗專屬事件:
go
window.OnWindowEvent(events.Common.WindowFocus, func(e *application.WindowEvent) {
app.Logger.Info("Window focused")
})
window.OnWindowEvent(events.Common.WindowClosing, func(e *application.WindowEvent) {
app.Logger.Info("Window closing")
})發出事件
從 Go 發出
基本發出方式:
go
app.Event.Emit("event-name", data)使用不同的資料類型:
go
// String
app.Event.Emit("message", "Hello")
// Number
app.Event.Emit("count", 42)
// Struct
app.Event.Emit("user", User{ID: 1, Name: "Alice"})
// Map
app.Event.Emit("config", map[string]interface{}{
"theme": "dark",
"fontSize": 14,
})
// Array
app.Event.Emit("items", []string{"a", "b", "c"})發送至特定視窗:
go
window.EmitEvent("window-specific-event", data)從 JavaScript 發出
javascript
import { Events } from '@wailsio/runtime'
// Emit to Go
Events.Emit("button-clicked", { buttonId: "submit" })
// Emit to all windows
Events.Emit("broadcast-message", "Hello everyone")監聽事件
在 Go 中
應用程式事件:
go
app.Event.On("custom-event", func(e *application.CustomEvent) {
data := e.Data
// Handle event
})使用型別斷言:
go
app.Event.On("user-updated", func(e *application.CustomEvent) {
user := e.Data.(User)
app.Logger.Info("User updated", "name", user.Name)
})多個處理常式:
go
// All handlers will be called
app.Event.On("order-created", logOrder)
app.Event.On("order-created", sendEmail)
app.Event.On("order-created", updateInventory)在 JavaScript 中
基本監聽器:
javascript
import { Events } from '@wailsio/runtime'
Events.On("event-name", (event) => {
console.log("Event received:", event.data)
})包含清理作業:
javascript
const unsubscribe = Events.On("event-name", handleEvent)
// Later, stop listening
unsubscribe()多個處理常式:
javascript
Events.On("data-updated", updateUI)
Events.On("data-updated", saveToCache)
Events.On("data-updated", logChange)單次處理常式:
javascript
Events.Once("data-updated", updateVariable)系統事件
應用程式事件
常見事件(跨平台):
go
import "github.com/wailsapp/wails/v3/pkg/events"
// Application started
app.Event.OnApplicationEvent(events.Common.ApplicationStarted, func(e *application.ApplicationEvent) {
app.Logger.Info("App started")
})
// Theme changed
app.Event.OnApplicationEvent(events.Common.ThemeChanged, func(e *application.ApplicationEvent) {
isDark := e.Context().IsDarkMode()
app.Event.Emit("theme-changed", isDark)
})
// System about to suspend
app.Event.OnApplicationEvent(events.Common.SystemWillSleep, func(e *application.ApplicationEvent) {
flushPendingWrites()
})
// System resumed from suspend
app.Event.OnApplicationEvent(events.Common.SystemDidWake, func(e *application.ApplicationEvent) {
reconnectSockets()
refreshState()
})
// File opened
app.Event.OnApplicationEvent(events.Common.ApplicationOpenedWithFile, func(e *application.ApplicationEvent) {
// Single-file: e.Context().Filename() returns ""; for multi-file launches
// (Finder "Open With..." → multiple selection) use OpenedFiles().
filePath := e.Context().Filename()
openFile(filePath)
})平台專屬事件:
go
// Application became active
app.Event.OnApplicationEvent(events.Mac.ApplicationDidBecomeActive, func(e *application.ApplicationEvent) {
app.Logger.Info("App became active")
})
// Application will terminate
app.Event.OnApplicationEvent(events.Mac.ApplicationWillTerminate, func(e *application.ApplicationEvent) {
cleanup()
})
// System about to sleep / resumed
app.Event.OnApplicationEvent(events.Mac.ApplicationWillSleep, func(e *application.ApplicationEvent) {
flushPendingWrites()
})
app.Event.OnApplicationEvent(events.Mac.ApplicationDidWake, func(e *application.ApplicationEvent) {
refreshState()
})
// Displays sleeping/waking — distinct from system sleep (e.g. lid lowered)
app.Event.OnApplicationEvent(events.Mac.ApplicationScreensDidSleep, func(e *application.ApplicationEvent) {
pauseRendering()
})
app.Event.OnApplicationEvent(events.Mac.ApplicationScreensDidWake, func(e *application.ApplicationEvent) {
resumeRendering()
})go
// Power status changed
app.Event.OnApplicationEvent(events.Windows.APMPowerStatusChange, func(e *application.ApplicationEvent) {
app.Logger.Info("Power status changed")
})
// System suspending
app.Event.OnApplicationEvent(events.Windows.APMSuspend, func(e *application.ApplicationEvent) {
saveState()
})
// System resumed. APMResumeAutomatic always fires on resume;
// APMResumeSuspend fires after it when the wake was triggered by
// user input. Prefer Common.SystemDidWake if you don't need to
// distinguish.
app.Event.OnApplicationEvent(events.Windows.APMResumeAutomatic, func(e *application.ApplicationEvent) {
refreshState()
})go
// Application startup
app.Event.OnApplicationEvent(events.Linux.ApplicationStartup, func(e *application.ApplicationEvent) {
app.Logger.Info("App starting")
})
// Theme changed
app.Event.OnApplicationEvent(events.Linux.SystemThemeChanged, func(e *application.ApplicationEvent) {
updateTheme()
})
// System sleep/wake — sourced from systemd-logind's PrepareForSleep
// signal on the system bus. Requires logind/elogind exposing
// org.freedesktop.login1, so it may be unavailable on distros/setups
// without it (Alpine, Void, some Devuan setups).
app.Event.OnApplicationEvent(events.Linux.SystemWillSleep, func(e *application.ApplicationEvent) {
flushPendingWrites()
})
app.Event.OnApplicationEvent(events.Linux.SystemDidWake, func(e *application.ApplicationEvent) {
refreshState()
})視窗事件
常見視窗事件:
go
// Window focus
window.OnWindowEvent(events.Common.WindowFocus, func(e *application.WindowEvent) {
app.Logger.Info("Window focused")
})
// Window blur
window.OnWindowEvent(events.Common.WindowLostFocus, func(e *application.WindowEvent) {
app.Logger.Info("Window blurred")
})
// Window closing
window.OnWindowEvent(events.Common.WindowClosing, func(e *application.WindowEvent) {
if hasUnsavedChanges() {
e.Cancel() // Prevent close
}
})
// Window closed
window.OnWindowEvent(events.Common.WindowClosing, func(e *application.WindowEvent) {
cleanup()
})事件掛鉤
掛鉤會在標準監聽器之前執行,並且可以取消事件:
go
// Hook - runs first, can cancel
window.RegisterHook(events.Common.WindowClosing, func(e *application.WindowEvent) {
if hasUnsavedChanges() {
result := showConfirmdialog("Unsaved changes. Close anyway?")
if result != "yes" {
e.Cancel() // Prevent window close
}
}
})
// Standard listener - runs after hooks
window.OnWindowEvent(events.Common.WindowClosing, func(e *application.WindowEvent) {
app.Logger.Info("Window closing")
})主要差異:
| 功能 | 掛鉤 | 標準監聽器 |
|---|---|---|
| 執行順序 | 最先執行,依註冊順序 | 在掛鉤之後執行,順序不保證 |
| 阻塞 | 同步,會阻塞下一個掛鉤 | 非同步,不阻塞 |
| 可否取消 | 可以 | 不可以(已傳播) |
| 使用情境 | 控制流程、驗證 | 記錄、附帶作用 |
事件模式
發布/訂閱模式
go
// Publisher (service)
type OrderService struct {
app *application.App
}
func (o *OrderService) CreateOrder(items []Item) (*Order, error) {
order := &Order{Items: items}
if err := o.saveOrder(order); err != nil {
return nil, err
}
// Publish event
o.app.Event.Emit("order-created", order)
return order, nil
}
// Subscribers
app.Event.On("order-created", func(e *application.CustomEvent) {
order := e.Data.(*Order)
sendConfirmationEmail(order)
})
app.Event.On("order-created", func(e *application.CustomEvent) {
order := e.Data.(*Order)
updateInventory(order)
})
app.Event.On("order-created", func(e *application.CustomEvent) {
order := e.Data.(*Order)
logOrder(order)
})請求/回應模式
go
// Frontend requests data
Emit("get-user-data", { userId: 123 })
// Backend responds
app.Event.On("get-user-data", func(e *application.CustomEvent) {
data := e.Data.(map[string]interface{})
userId := int(data["userId"].(float64))
user := getUserFromDB(userId)
// Send response
app.Event.Emit("user-data-response", user)
})javascript
// Frontend receives response
Events.On("user-data-response", (event) => {
const user = event.data
displayUser(user)
})注意:對於請求/回應,繫結是更好的選擇。請使用事件來傳送通知。
廣播模式
go
// Broadcast to all windows
app.Event.Emit("global-notification", "System update available")
// Each window handles it
Events.On("global-notification", (event) => {
const message = event.data
showNotification(message)
})事件彙總
go
type EventAggregator struct {
events []Event
mu sync.Mutex
}
func (ea *EventAggregator) Add(event Event) {
ea.mu.Lock()
defer ea.mu.Unlock()
ea.events = append(ea.events, event)
// Emit batch every 100 events
if len(ea.events) >= 100 {
app.Event.Emit("event-batch", ea.events)
ea.events = nil
}
}完整範例
Go:
go
package main
import (
"github.com/wailsapp/wails/v3/pkg/application"
"github.com/wailsapp/wails/v3/pkg/events"
)
type NotificationService struct {
app *application.App
}
func (n *NotificationService) Notify(message string) {
// Emit to all windows
n.app.Event.Emit("notification", map[string]interface{}{
"message": message,
"timestamp": time.Now(),
})
}
func main() {
app := application.New(application.Options{
Name: "Event Demo",
})
notifService := &NotificationService{app: app}
// System events
app.Event.OnApplicationEvent(events.Common.ThemeChanged, func(e *application.ApplicationEvent) {
isDark := e.Context().IsDarkMode()
app.Event.Emit("theme-changed", isDark)
})
// Custom events from frontend
app.Event.On("user-action", func(e *application.CustomEvent) {
data := e.Data.(map[string]interface{})
action := data["action"].(string)
app.Logger.Info("User action", "action", action)
// Respond
notifService.Notify("Action completed: " + action)
})
// Window events
window := app.Window.New()
window.OnWindowEvent(events.Common.WindowFocus, func(e *application.WindowEvent) {
app.Event.Emit("window-focused", window.Name())
})
window.RegisterHook(events.Common.WindowClosing, func(e *application.WindowEvent) {
// Confirm before close
app.Event.Emit("confirm-close", nil)
e.Cancel() // Wait for confirmation
})
app.Run()
}JavaScript:
javascript
import { Events } from '@wailsio/runtime'
// Listen for notifications
Events.On("notification", (event) => {
showNotification(event.data.message)
})
// Listen for theme changes
Events.On("theme-changed", (event) => {
const isDark = event.data
document.body.classList.toggle('dark', isDark)
})
// Listen for window focus
Events.On("window-focused", (event) => {
const windowName = event.data
console.log(`Window ${windowName} focused`)
})
// Handle close confirmation
Events.On("confirm-close", (event) => {
if (confirm("Close window?")) {
Events.Emit("close-confirmed", true)
}
})
// Emit user actions
document.getElementById('button').addEventListener('click', () => {
Events.Emit("user-action", { action: "button-clicked" })
})最佳實務
✅ 建議做法
- 使用事件傳送通知——單向通訊
- 使用繫結處理請求——雙向通訊
- 保持事件名稱一致——使用 kebab-case
- 記錄事件資料的規格——其中包含哪些欄位?
- 完成後取消訂閱——防止記憶體流失
- 使用掛鉤進行驗證——控制事件流程
❌ 請勿
- 請勿使用事件進行 RPC——請改用繫結
- 不要過於頻繁地發出事件——必要時批次處理
- 不要在處理常式中阻塞——讓處理常式保持快速
- 不要忘記取消訂閱——否則會造成記憶體洩漏
- 不要使用事件傳輸大量資料——請使用繫結
- 不要形成事件迴圈——A 發出 B,B 又發出 A
後續步驟
事件指南
瞭解事件模式和型別安全的事件產生方式。
事件 API
探索完整的應用程式與視窗事件 API。
繫結
使用繫結進行要求/回應。
視窗事件
處理視窗生命週期事件。