electron主进程和渲染进程通信时用到的 event 名称，如何定义为常量

Js 方式

在Electron应用中，主进程和渲染进程之间的通信经常依赖于IPC（Inter-Process Communication）。为了保持代码的整洁和易于维护，最好将用于IPC通信的事件名称定义为常量。这样做可以减少错误（例如因拼写错误导致的事件名称不匹配），并使代码更加模块化。

步骤1: 创建常量文件

首先，你可以创建一个专门用于存放常量的JavaScript文件。这个文件可以包含所有的事件名称和其他在应用中重复使用的常量。

// constants.js

module.exports = {
    EVENTS: {
        SEND_MESSAGE: 'send-message',
        RECEIVE_MESSAGE: 'receive-message',
        PERFORM_ACTION: 'perform-action'
    }
};
1
2
3
4
5
6
7
8
9

步骤2: 在主进程中使用常量

然后，在你的主进程文件中，引入这些常量，并在处理IPC事件时使用它们。

// main.js
const { app, BrowserWindow, ipcMain } = require('electron');
const { EVENTS } = require('./constants');

let mainWindow;

function createWindow() {
    mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: false,
            preload: path.join(__dirname, 'preload.js')
        }
    });

    mainWindow.loadFile('index.html');

    ipcMain.on(EVENTS.SEND_MESSAGE, (event, arg) => {
        console.log('Message received', arg);
        event.reply(EVENTS.RECEIVE_MESSAGE, 'Message processed');
    });
}

app.on('ready', createWindow);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

步骤3: 在渲染进程中使用常量

在渲染进程中，你同样需要引入这些常量。由于直接在渲染进程中引入Node模块可能存在安全风险，推荐通过preload.js脚本安全地将常量暴露给渲染进程。

// preload.js
const { contextBridge } = require('electron');
const { EVENTS } = require('./constants');

contextBridge.exposeInMainWorld('api', {
    send: (data) => ipcRenderer.send(EVENTS.SEND_MESSAGE, data),
    onReceive: (func) => ipcRenderer.on(EVENTS.RECEIVE_MESSAGE, (event, arg) => func(arg)),
    events: EVENTS
});
1
2
3
4
5
6
7
8
9

// 在渲染进程中
window.api.onReceive((message) => {
    console.log('Received from main:', message);
});

document.getElementById('sendBtn').addEventListener('click', () => {
    window.api.send('Hello from renderer');
});
1
2
3
4
5
6
7
8

优势

• 减少错误：通过使用常量，你可以减少因手动输入事件名称而可能出现的错误。
• 代码维护：当需要更改事件名称时，你只需在一个地方更新它，而不需要修改所有使用该字符串的地方。
• 可读性：使用预定义的常量可以使代码更加清晰易懂。

结论

通过在Electron应用中定义常量来管理事件名称，你可以提高代码的可维护性和可读性，同时减少错误的发生。这是一种非常推荐的做法，特别是在大型项目或团队协作的环境中。

TS 方式

在使用 TypeScript 开发 Electron 应用时，定义事件名称为常量的一个优雅方式是使用 enum 或使用常量对象。这样可以在整个项目中保证类型的安全性和一致性。下面我将展示如何使用这两种方法来定义事件名称。

方法1: 使用 TypeScript enum

使用 enum 可以定义一组命名常量，这是管理事件名称的一个非常清晰的方法。

// events.ts
export enum IPCEvents {
    SendMessage = "send-message",
    ReceiveMessage = "receive-message",
    PerformAction = "perform-action"
}
1
2
3
4
5
6

在主进程中使用这些事件名称：

// main.ts
import { app, BrowserWindow, ipcMain } from 'electron';
import { IPCEvents } from './events';

let mainWindow: BrowserWindow;

function createWindow() {
    mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: false,
            preload: path.join(__dirname, 'preload.js')
        }
    });

    mainWindow.loadFile('index.html');

    ipcMain.on(IPCEvents.SendMessage, (event, arg) => {
        console.log('Message received', arg);
        event.reply(IPCEvents.ReceiveMessage, 'Message processed');
    });
}

app.on('ready', createWindow);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

在 preload.ts 脚本中暴露到渲染进程：

// preload.ts
import { contextBridge, ipcRenderer } from 'electron';
import { IPCEvents } from './events';

contextBridge.exposeInMainWorld('electronAPI', {
    sendMessage: (data: string) => ipcRenderer.send(IPCEvents.SendMessage, data),
    onReceiveMessage: (callback: (arg: string) => void) => {
        ipcRenderer.on(IPCEvents.ReceiveMessage, (event, arg) => callback(arg));
    }
});
1
2
3
4
5
6
7
8
9
10

在渲染进程中的 TypeScript 代码：

declare global {
    interface Window {
        electronAPI: {
            sendMessage(data: string): void;
            onReceiveMessage(callback: (arg: string) => void): void;
        }
    }
}

window.electronAPI.onReceiveMessage((message) => {
    console.log('Received from main:', message);
});

document.getElementById('sendBtn')!.addEventListener('click', () => {
    window.electronAPI.sendMessage('Hello from renderer');
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

方法2: 使用常量对象

如果你更喜欢使用对象来组织你的常量，你可以定义一个常量对象，并使用 as const 断言来确保 TypeScript 处理这些值为字面量类型。

// events.ts
export const IPCEvents = {
    SendMessage: "send-message",
    ReceiveMessage: "receive-message",
    PerformAction: "perform-action"
} as const;

// 用法与 enum 类似
1
2
3
4
5
6
7
8

优点

• 类型安全：使用 TypeScript 的类型系统可以在编译时捕捉到错误，如事件名称拼写错误。
• 代码自动补全：IDE能够提供自动补全，减少开发者的记忆负担。
• 维护简便：在一个地方管理所有的事件名称，便于更新和维护。

总结

无论选择哪种方式，使用 TypeScript 来定义事件名称为常量可以提高你的 Electron 应用的类型安全性和可维护性。enum 提供了一个明确的方式来组织这些值，而常量对象则为那些偏好对象字面量的开发者提供了便利。