Electron异步消息发送及跨渲染进程数据同步技术问询

没问题，这两个问题我都帮你捋清楚～

一、向所有渲染进程发送异步消息的方法 #

Electron 里主进程可以通过 BrowserWindow.getAllWindows() 获取当前所有打开的窗口实例，然后遍历每个窗口的 webContents 对象，调用 send() 方法就能给所有渲染进程发异步消息啦。

举个主进程的代码例子：

// 主进程 main.js
const { BrowserWindow, ipcMain } = require('electron');

// 定义给所有渲染进程发消息的函数
function sendToAllRenderers(channel, ...args) {
  const allWindows = BrowserWindow.getAllWindows();
  allWindows.forEach(window => {
    if (window.webContents) {
      window.webContents.send(channel, ...args);
    }
  });
}

// 比如在某个时机调用，比如主进程收到某个事件后
ipcMain.on('trigger-broadcast', (event, data) => {
  sendToAllRenderers('global-message', data);
});

渲染进程里只需要监听对应的频道就行：

// 任意渲染进程 js 文件
const { ipcRenderer } = require('electron');

ipcRenderer.on('global-message', (event, data) => {
  console.log('收到全局消息:', data);
  // 这里处理消息逻辑
});

二、天气应用：settings 窗口选城市后更新 main_ui 的实现 #

针对你的场景，最稳妥清晰的方式是通过主进程做消息中转，因为 settings 是 main_ui 创建的，主进程可以分别和两个渲染进程通信，步骤如下：

1. 主进程保存 main_ui 窗口的引用 #

首先在主进程里创建 main_ui 窗口时，要把它的引用保存下来，方便后续给它发消息：

// 主进程 main.js
let mainWindow;

function createMainWindow() {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
      enableRemoteModule: true // 从渲染进程创建子窗口可能需要这个
    }
  });

  mainWindow.loadFile('main_ui.html');

  // 窗口关闭时清空引用
  mainWindow.on('closed', () => {
    mainWindow = null;
  });
}

// 响应 main_ui 打开 settings 窗口的请求
ipcMain.on('open-settings-window', () => {
  const settingsWindow = new BrowserWindow({
    width: 400,
    height: 300,
    parent: mainWindow, // 设置父窗口为 main_ui，让 settings 依附于主窗口
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    }
  });

  settingsWindow.loadFile('settings.html');
});

2. settings 窗口提交时向主进程发送城市信息 #

完善你提供的 settings.js 代码，点击提交按钮时，把选中的城市 ID 和名称发给主进程：

// settings.js
const { ipcRenderer } = require('electron');

var submit = document.getElementById("submit");
var city_id = document.getElementById("city_code");
var city_name = document.getElementById("city_name");

submit.addEventListener('click', () => {
  const selectedCity = {
    id: city_id.value,
    name: city_name.value
  };
  // 向主进程发送城市选择事件
  ipcRenderer.send('city-selected', selectedCity);
  // 提交后可以关闭 settings 窗口
  window.close();
});

3. 主进程转发城市信息给 main_ui 窗口 #

主进程收到 city-selected 事件后，把城市信息转发给 mainWindow：

// 主进程 main.js
ipcMain.on('city-selected', (event, cityData) => {
  if (mainWindow && mainWindow.webContents) {
    // 给 main_ui 窗口发送更新天气的消息
    mainWindow.webContents.send('update-weather', cityData);
  }
});

4. main_ui 窗口监听消息并更新天气 #

在 main_ui 的渲染进程 js 文件里，监听 update-weather 事件，拿到城市信息后去请求天气数据并更新 UI：

// main_ui.js
const { ipcRenderer } = require('electron');

// 监听主进程发来的更新天气消息
ipcRenderer.on('update-weather', async (event, cityData) => {
  console.log('要更新天气的城市:', cityData);
  // 这里调用天气 API 获取数据（示例）
  try {
    const response = await fetch(`https://api.example.com/weather?cityId=${cityData.id}`);
    const weatherData = await response.json();
    // 更新 UI 显示天气信息
    document.getElementById('city-name-display').textContent = cityData.name;
    document.getElementById('weather-temp').textContent = `${weatherData.temperature}°C`;
    // 其他UI更新逻辑...
  } catch (error) {
    console.error('获取天气数据失败:', error);
  }
});

这样整个流程就通了：settings选城市→发消息给主进程→主进程转发给main_ui→main_ui请求数据并更新UI。

另外，如果你想尝试渲染进程直接通信，也可以在main_ui创建settings窗口时记录其webContents ID，再通过webContents.fromId(id)获取后发消息，但这种方式需要处理窗口关闭后的引用问题，不如主进程中转直观可靠，所以还是推荐前者。

内容的提问来源于stack exchange，提问作者dipankar pal