Communication IPC entre les processus
Utilisez ipcMain et ipcRenderer pour envoyer des messages de manière sécurisée entre le processus principal et le processus de rendu React.
Communication IPC entre les processus est une leçon React Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage React Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours React Academy comprend 4 leçons au total.
ipcMain.handle : modèle requête-réponse
ipcMain.handle enregistre un canal nommé dans le processus principal, qui répond aux requêtes du processus de rendu. Il accepte une fonction de traitement asynchrone, et sa valeur de retour devient la valeur résolue de la promesse dans le processus de rendu. Cette méthode convient donc parfaitement aux opérations telles que la lecture de fichiers ou l'interrogation d'une base de données.
ipcRenderer.invoke : appeler le processus principal
ipcRenderer.invoke envoie un message sur un canal nommé et renvoie une promesse qui se résout avec la valeur renvoyée par le gestionnaire du processus principal. Cela crée un modèle asynchrone clair de requête-réponse, qui s'utilise naturellement avec async/await dans le script de préchargement comme dans les composants React.
Exposer invoke via contextBridge
Le script de préchargement encapsule les appels à ipcRenderer.invoke et les expose via contextBridge. Par exemple : api.readFile = (filePath) => ipcRenderer.invoke('read-file', filePath). Le processus de rendu appelle window.api.readFile(path) et récupère une promesse : l'ensemble reste propre et isolé.
Pourquoi le processus de rendu n'importe jamais ipcRenderer
Lorsque contextIsolation est activé, le processus de rendu ne peut pas appeler require('electron') ni importer directement ipcRenderer : le module est tout simplement indisponible. Tout l'IPC doit passer par l'exposition de contextBridge dans le script de préchargement. C'est intentionnel : cela empêche les attaques XSS d'obtenir un accès à l'IPC.
ipcMain.on : messages sans réponse
ipcMain.on écoute les messages unidirectionnels envoyés avec ipcRenderer.send, et non avec invoke. Aucun canal de réponse automatique n'est prévu. Ce modèle convient aux notifications ou aux commandes qui ne nécessitent pas de réponse du processus de rendu, par exemple pour journaliser des événements ou déclencher une notification native.
Envoyer des données du processus principal au processus de rendu
Le processus principal peut envoyer des données au processus de rendu à l'aide de webContents.send('channel-name', data). Il s'agit du principal moyen pour le processus principal d'initier une communication, par exemple pour transmettre des événements de surveillance du système de fichiers ou des actions de menus natifs à l'interface React.
ipcRenderer.on : écouter dans le script de préchargement
Dans le script de préchargement, ipcRenderer.on('update', callback) enregistre un écouteur pour les messages envoyés par le processus principal. La fonction de rappel reçoit l'événement ainsi que toutes les données envoyées par le processus principal, que vous transmettez ensuite au moteur de rendu par l'intermédiaire de la fonction exposée par contextBridge.
Exposer des écouteurs d'événements via contextBridge
Un modèle clair pour les événements envoyés est le suivant : api.onUpdate = (callback) => ipcRenderer.on('update', (_event, data) => callback(data)). Les composants React s'abonnent en appelant window.api.onUpdate(setData), et la fonction de rappel met à jour l'état lorsque le processus principal envoie de nouvelles données.
Nettoyage : supprimer les écouteurs d'événements
Chaque écouteur ipcRenderer.on doit être supprimé lorsqu'il n'est plus nécessaire afin d'éviter les fuites de mémoire et les appels de rappel en double. La fonction du script de préchargement doit renvoyer une fonction de nettoyage (par ex. () => ipcRenderer.removeListener('update', callback)) que React appelle dans la fonction de nettoyage renvoyée par useEffect.
Sécurité : valider les données d'entrée IPC
Les données d'entrée IPC provenant du moteur de rendu doivent être considérées comme des données non fiables dans le gestionnaire du processus principal. Validez toujours les chemins de fichiers (pour empêcher les attaques par traversée de chemin), assainissez les paramètres de requête et vérifiez que l'origine de l'émetteur est bien celle attendue. N'exposez jamais un canal IPC générique pour eval ou exec.
Structurer les canaux IPC
À mesure que votre application grandit, organisez les canaux IPC à l'aide de conventions d'espaces de noms : 'fs:read-file', 'db:query', 'window:minimize'. Conservez les noms des canaux dans un fichier de constantes partagé, importé à la fois par main.js et le script de préchargement, afin d'éviter les fautes de frappe et de sécuriser les opérations de restructuration.
Valeur de retour de ipcMain.handle
Que devient la valeur renvoyée par un gestionnaire ipcMain.handle ?
Récapitulatif de la leçon
L'IPC est le pilier central de la communication dans Electron. ipcMain.handle et ipcRenderer.invoke forment une paire requête-réponse fondée sur les promesses pour les opérations lancées par le moteur de rendu. Pour les messages envoyés par le processus principal, webContents.send et ipcRenderer.on fonctionnent ensemble. Tout l'IPC utilisé dans le moteur de rendu doit passer par le contextBridge du script de préchargement, et les écouteurs doivent toujours être supprimés afin d'éviter les fuites de mémoire.
Questions Fréquemment Posées
La leçon « Communication IPC entre les processus » est-elle gratuite ?
Oui — le texte complet de « Communication IPC entre les processus » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours React Academy, passe à CoddyKit PRO. Le cours React Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Communication IPC entre les processus » ?
Utilisez ipcMain et ipcRenderer pour envoyer des messages de manière sécurisée entre le processus principal et le processus de rendu React. Tu pratiques React Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer React Academy ?
Aucune expérience préalable n'est requise. React Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.
Combien de temps prend la leçon « Communication IPC entre les processus » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon React Academy ?
Oui. Chaque leçon React Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Architecture d’Electron : processus principal et processus de rendu
- Configurer React avec Electron
- Communication IPC entre les processus
- Empaquetage et distribution pour les plateformes de bureau