← Volver

IPC Electron

Publicado el 14 de diciembre de 2025

Electron

IPC (inter-process communication) se utiliza para enlazar el renderer.js con el main.js mediante el preload.js

preload.js

const { contextBridge, ipcRenderer } = require("electron");

contextBridge.exposeInMainWorld("api", {
  saveFile: (data) => {
    return ipcRenderer.invoke("save-file", data);
  },
});

renderer.js

const btnSend = document.querySelector("#btn-send");

btnSend.addEventListener("click", async (e) => {
  const result = await window.api.saveFile("data");
  console.log(result);
  alert(result.message);
});

main.js

ipcMain.handle("save-file", async (event, data) => {
  return { ok: true, message: "Guardado OK" };
});

Enviar datos del puerto serie continuamente.

main.js

ipcMain.on("start-serial", (event, config) => {
  if (port?.isOpen) return;

  port = new SerialPort({
    path: config.path,
    baudRate: config.baudRate,
  });

  port.on("data", (data) => {
    event.sender.send("serial-data", data.toString());
  });

  port.on("error", (err) => {
    event.sender.send("serial-error", err.message);
  });
});

preload.js

const { contextBridge, ipcRenderer } = require("electron");

contextBridge.exposeInMainWorld("api", {
  startSerial: (config) => ipcRenderer.send("start-serial", config),
  stopSerial: () => ipcRenderer.send("stop-serial"),

  onSerialData: (callback) => {
    ipcRenderer.on("serial-data", (_event, data) => callback(data));
  },

  onSerialError: (callback) => {
    ipcRenderer.on("serial-error", (_event, error) => callback(error));
  },
});

renderer.js

window.api.startSerial({
  path: "/dev/ttyUSB0",
  baudRate: 9600,
});

window.api.onSerialData((data) => {
  console.log("Dato recibido:", data);
});

window.api.onSerialError((error) => {
  console.error("Error serial:", error);
});