0Pricing
React Academy · Aula

Comunicação IPC entre processos

Use ipcMain e ipcRenderer para enviar mensagens com segurança entre o processo principal e o processo de renderização do React.

Comunicação IPC entre processos é uma aula grátis de React Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de React Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de React Academy inclui 4 aulas no total.

ipcMain.handle: padrão de solicitação e resposta

ipcMain.handle registra um canal nomeado no processo principal que responde às solicitações do processo de renderização. Ele aceita uma função de processamento assíncrona, e o valor retornado por ela se torna o valor resolvido da promessa no processo de renderização, o que o torna ideal para operações como ler arquivos ou consultar um banco de dados.

ipcRenderer.invoke: chamando o processo principal

ipcRenderer.invoke envia uma mensagem por um canal nomeado e retorna uma promessa que é resolvida com o valor retornado pelo processador do processo principal. Isso cria um padrão assíncrono simples de solicitação e resposta, que funciona naturalmente com async/await tanto no script de pré-carregamento quanto nos componentes React.

Expondo invoke por meio do contextBridge

O script de pré-carregamento encapsula chamadas a ipcRenderer.invoke e as expõe por meio do contextBridge. Por exemplo: api.readFile = (filePath) => ipcRenderer.invoke('read-file', filePath). O processo de renderização chama window.api.readFile(path) e recebe uma promessa de volta: de forma simples e em sandbox.

Por que o processo de renderização nunca importa ipcRenderer

Com contextIsolation ativado, o processo de renderização não pode usar require('electron') nem importar ipcRenderer diretamente: o módulo simplesmente não está disponível. Toda comunicação IPC deve passar pela exposição do contextBridge no script de pré-carregamento. Isso é intencional, pois impede que ataques XSS obtenham acesso ao IPC.

ipcMain.on: mensagens sem resposta

ipcMain.on escuta mensagens unidirecionais enviadas com ipcRenderer.send, e não com invoke. Não há um canal de resposta automático; esse padrão é adequado para notificações ou comandos que não exigem uma resposta do processo de renderização, como registrar eventos ou acionar uma notificação nativa.

Enviando dados do processo principal para o processo de renderização

O processo principal pode enviar dados ao processo de renderização usando webContents.send('channel-name', data). Essa é a principal forma de o processo principal iniciar uma comunicação, por exemplo, encaminhando eventos de monitoramento do sistema de arquivos ou ações de menus nativos para a interface React.

Escutando no pré-carregamento

No script de preload, ipcRenderer.on('update', callback) registra um ouvinte para mensagens enviadas pelo processo principal. A função de retorno recebe o evento e todos os dados enviados pelo processo principal, que então são encaminhados ao processo de renderização por meio da função exposta por contextBridge.

Expondo ouvintes de eventos por meio de contextBridge

Um padrão claro para eventos enviados é: api.onUpdate = (callback) => ipcRenderer.on('update', (_event, data) => callback(data)). Os componentes React se inscrevem chamando window.api.onUpdate(setData), e a função de retorno atualiza o estado quando o processo principal envia novos dados.

Limpeza: removendo ouvintes de eventos

Todo ouvinte ipcRenderer.on deve ser removido quando não for mais necessário, para evitar vazamentos de memória e funções de retorno duplicadas. A função de preload deve retornar uma função de limpeza (por exemplo, () => ipcRenderer.removeListener('update', callback)) que React chama no retorno de limpeza de useEffect.

Segurança: validando entradas IPC

As entradas IPC recebidas do processo de renderização devem ser tratadas como dados não confiáveis pelo manipulador do processo principal. Sempre valide os caminhos de arquivos (para impedir ataques de travessia de caminhos), higienize os parâmetros de consulta e verifique se a origem do remetente é a esperada. Nunca exponha um canal IPC genérico para eval ou exec.

Estruturando canais IPC

À medida que seu aplicativo cresce, organize os canais IPC usando convenções de nomenclatura por espaço de nomes: 'fs:read-file', 'db:query', 'window:minimize'. Mantenha os nomes dos canais em um arquivo compartilhado de constantes, importado tanto por main.js quanto pelo script de preload, para evitar erros de digitação e tornar a refatoração mais segura.

Valor de retorno de ipcMain.handle

O que acontece com o valor retornado por um manipulador ipcMain.handle?

Resumo da lição

IPC é a base da comunicação no Electron. ipcMain.handle e ipcRenderer.invoke formam um par de solicitação e resposta baseado em promessas para operações iniciadas pelo processo de renderização. Para envios iniciados pelo processo principal, webContents.send e ipcRenderer.on trabalham em conjunto. Toda comunicação IPC no processo de renderização deve passar pelo contextBridge do preload, e os ouvintes sempre devem ser removidos para evitar vazamentos de memória.

Perguntas Frequentes

A aula “Comunicação IPC entre processos” é grátis?

Sim — o texto completo de “Comunicação IPC entre processos” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de React Academy, atualize para CoddyKit PRO. O curso de React Academy inclui 4 aulas no total.

O que vou aprender em “Comunicação IPC entre processos”?

Use ipcMain e ipcRenderer para enviar mensagens com segurança entre o processo principal e o processo de renderização do React. Você pratica React Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar React Academy?

Nenhuma experiência prévia é necessária. React Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.

Quanto tempo leva a aula “Comunicação IPC entre processos”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de React Academy?

Sim. Cada aula de React Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Arquitetura do Electron: processos principal e de renderização
  2. Configurando React com Electron
  3. Comunicação IPC entre processos
  4. Empacotamento e distribuição para plataformas desktop
← Voltar para React Academy