解决Electron应用中node-hid库在渲染进程中无法工作的问题

import { app, BrowserWindow, ipcMain } from 'electron';
import * as HID from 'node-hid'; // 导入 node-hid 库

// 创建窗口函数，此处省略具体实现
function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: false, // 最佳实践：禁用渲染进程的 Node.js 集成
      contextIsolation: true, // 最佳实践：启用上下文隔离
      preload: path.join(__dirname, 'preload.js') // 预加载脚本，用于安全地暴露 IPC
    }
  });

  mainWindow.loadFile('index.html'); // 加载渲染进程的HTML文件
  return mainWindow;
}

app.whenReady().then(() => {
  const mainWindow = createWindow();

  // 在主进程中调用 node-hid 获取连接设备列表
  try {
    const connectedDevices = HID.devices();
    console.log('Connected HID devices:', connectedDevices);

    // 将设备数据发送到渲染进程
    // 注意：这里的 window.webContent.send 应该在窗口创建后调用
    // 为了确保窗口已加载完毕并能接收消息，可以稍作延迟或在渲染进程准备好后通知主进程
    mainWindow.webContents.on('did-finish-load', () => {
      mainWindow.webContents.send('connected-devices', connectedDevices);
    });

  } catch (error) {
    console.error('Error getting HID devices:', error);
    // 也可以将错误信息发送到渲染进程
    mainWindow.webContents.on('did-finish-load', () => {
      mainWindow.webContents.send('error-message', 'Failed to get HID devices: ' + error.message);
    });
  }

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) createWindow();
  });
});

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit();
});

// 如果需要渲染进程主动请求数据，可以使用 ipcMain.handle
ipcMain.handle('get-hid-devices', async () => {
  try {
    return HID.devices();
  } catch (error) {
    console.error('Error in ipcMain.handle("get-hid-devices"):', error);
    throw new Error('Failed to retrieve HID devices.');
  }
});

import { contextBridge, ipcRenderer } from 'electron';

contextBridge.exposeInMainWorld('electronAPI', {
  onConnectedDevices: (callback: (devices: HID.Device[]) => void) => ipcRenderer.on('connected-devices', (_event, devices) => callback(devices)),
  onError: (callback: (message: string) => void) => ipcRenderer.on('error-message', (_event, message) => callback(message)),
  getHidDevices: () => ipcRenderer.invoke('get-hid-devices') // 暴露一个方法供渲染进程调用
});

import React, { useEffect, useState } from 'react';
import ReactDOM from 'react-dom/client';

// 假设 electronAPI 已通过 contextBridge 暴露在 window 对象上
declare global {
  interface Window {
    electronAPI: {
      onConnectedDevices: (callback: (devices: any[]) => void) => void;
      onError: (callback: (message: string) => void) => void;
      getHidDevices: () => Promise<any[]>;
    };
  }
}

function App() {
  const [devices, setDevices] = useState<any[]>([]);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    // 监听主进程主动发送的数据
    window.electronAPI.onConnectedDevices((deviceList) => {
      setDevices(deviceList);
      setError(null);
    });

    // 监听错误信息
    window.electronAPI.onError((errorMessage) => {
      setError(errorMessage);
      setDevices([]);
    });

    // 也可以在渲染进程需要时请求数据
    const fetchDevices = async () => {
      try {
        const deviceList = await window.electronAPI.getHidDevices();
        setDevices(deviceList);
        setError(null);
      } catch (err: any) {
        setError(err.message);
        setDevices([]);
      }
    };
    fetchDevices(); // 在组件挂载时请求一次

  }, []);

  return (
    <div>
      <h1>连接的HID设备</h1>
      {error && <p style={{ color: 'red' }}>错误: {error}</p>}
      {devices.length > 0 ? (
        <ul>
          {devices.map((device, index) => (
            <li key={index}>
              <strong>产品:</strong> {device.product || 'N/A'}, <strong>制造商:</strong> {device.manufacturer || 'N/A'}, <strong>路径:</strong> {device.path}
            </li>
          ))}
        </ul>
      ) : (
        <p>未检测到HID设备或正在加载...</p>
      )}
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root')!);
root.render(<App />);