Comunicación IPC entre procesos
Use ipcMain e ipcRenderer para enviar mensajes de forma segura entre el proceso principal y el proceso de renderizado de React.
Comunicación IPC entre procesos es una lección gratuita de React Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de React Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de React Academy incluye 4 lecciones en total.
ipcMain.handle: patrón de solicitud y respuesta
ipcMain.handle registra un canal con nombre en el proceso principal que responde a las solicitudes del proceso de renderizado. Acepta una función controladora asíncrona, y su valor de retorno se convierte en el valor resuelto de la Promise en el proceso de renderizado, por lo que resulta ideal para operaciones como leer archivos o consultar una base de datos.
ipcRenderer.invoke: llamar al proceso principal
ipcRenderer.invoke envía un mensaje por un canal con nombre y devuelve una Promise que se resuelve con el valor de retorno del controlador del proceso principal. Esto crea un patrón asíncrono limpio de solicitud y respuesta que funciona de forma natural con async/await tanto en el script de precarga como en los componentes React.
Exponer invoke mediante contextBridge
El script de precarga encapsula las llamadas a ipcRenderer.invoke y las expone mediante contextBridge. Por ejemplo: api.readFile = (filePath) => ipcRenderer.invoke('read-file', filePath). El proceso de renderizado llama a window.api.readFile(path) y recibe una Promise; es una solución limpia y aislada.
Por qué el proceso de renderizado nunca importa ipcRenderer
Con contextIsolation habilitado, el proceso de renderizado no puede usar require('electron') ni importar ipcRenderer directamente: el módulo simplemente no está disponible. Toda la comunicación IPC debe pasar por la exposición de contextBridge del script de precarga. Esto es deliberado: impide que los ataques XSS obtengan acceso a IPC.
ipcMain.on: mensajes sin respuesta
ipcMain.on escucha mensajes unidireccionales enviados con ipcRenderer.send (no con invoke). No existe un canal de respuesta automático; este patrón es adecuado para notificaciones o comandos que no requieren una respuesta para el proceso de renderizado, como registrar eventos o activar una notificación nativa.
Enviar datos del proceso principal al de renderizado
El proceso principal puede enviar datos al proceso de renderizado mediante webContents.send('channel-name', data). Esta es la forma principal en que el proceso principal inicia la comunicación; por ejemplo, para reenviar eventos de vigilancia del sistema de archivos o acciones de menús nativos a la interfaz de React.
ipcRenderer.on: escuchar en la precarga
En el script de precarga, ipcRenderer.on('update', callback) registra un listener para recibir mensajes push del proceso principal. El callback recibe el evento y cualquier dato enviado por el proceso principal, que después se pasa al renderer mediante la función expuesta por contextBridge.
Exponer listeners de eventos mediante contextBridge
Un patrón limpio para los eventos push es: api.onUpdate = (callback) => ipcRenderer.on('update', (_event, data) => callback(data)). Los componentes de React se suscriben llamando a window.api.onUpdate(setData), y el callback actualiza el estado cuando el proceso principal envía datos nuevos.
Limpieza: eliminar listeners de eventos
Cada listener de ipcRenderer.on debe eliminarse cuando ya no sea necesario para evitar fugas de memoria y callbacks duplicados. La función de precarga debe devolver una función de limpieza (por ejemplo, () => ipcRenderer.removeListener('update', callback)) que React llama desde la función de limpieza que devuelve useEffect.
Seguridad: validar las entradas de IPC
Las entradas de IPC procedentes del renderer deben tratarse como datos no confiables en el handler del proceso principal. Valide siempre las rutas de archivos (para evitar ataques de path traversal), sanee los parámetros de consulta y compruebe que el origen del remitente sea el esperado. Nunca exponga un canal de IPC genérico para eval o exec.
Estructurar los canales de IPC
A medida que crece su aplicación, organice los canales de IPC mediante convenciones de namespacing: 'fs:read-file', 'db:query', 'window:minimize'. Mantenga los nombres de los canales en un archivo de constantes compartido que importen tanto main.js como el script de precarga para evitar errores tipográficos y hacer más seguras las refactorizaciones.
Valor de retorno de ipcMain.handle
¿Qué ocurre con el valor que devuelve un handler de ipcMain.handle?
Repaso de la lección
IPC es la base de la comunicación en Electron. ipcMain.handle e ipcRenderer.invoke forman un par de solicitud y respuesta basado en Promises para las operaciones iniciadas por el renderer. Para los envíos iniciados por el proceso principal, webContents.send e ipcRenderer.on funcionan conjuntamente. Todo el IPC del renderer debe pasar por el contextBridge de la precarga, y los listeners siempre deben limpiarse para evitar fugas de memoria.
Preguntas frecuentes
¿La lección «Comunicación IPC entre procesos» es gratis?
Sí — el texto completo de «Comunicación IPC entre procesos» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de React Academy, actualiza a CoddyKit PRO. El curso de React Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Comunicación IPC entre procesos»?
Use ipcMain e ipcRenderer para enviar mensajes de forma segura entre el proceso principal y el proceso de renderizado de React. Practicas React Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar React Academy?
No se requiere experiencia previa. React Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.
¿Cuánto tiempo toma la lección «Comunicación IPC entre procesos»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de React Academy?
Sí. Cada lección de React Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Arquitectura de Electron: procesos principal y de renderizado
- Configuración de React con Electron
- Comunicación IPC entre procesos
- Empaquetado y distribución para plataformas de escritorio