Pembangunan Aplikasi Desktop Electron · Pelajaran

Komunikasi Antara Proses (IPC)

Pelajari cara melaksanakan saluran komunikasi yang selamat antara proses utama dan pemapar menggunakan modul IPC Electron seperti `ipcMain` dan `ipcRenderer`.

Pelajaran 2 daripada 412 langkah

Komunikasi Antara Proses (IPC) ialah pelajaran Pembangunan Aplikasi Desktop Electron percuma di CoddyKit. Ini ialah pelajaran 2 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Pembangunan Aplikasi Desktop Electron, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Pembangunan Aplikasi Desktop Electron merangkumi sejumlah 4 pelajaran.

Apakah IPC dalam Electron?

Dalam Electron, aplikasi anda berjalan merentasi dua jenis proses utama: Proses Utama dan Proses Pemapar.

Proses Utama mengurus kitar hayat aplikasi dan berinteraksi dengan sistem pengendalian.
Proses Pemapar (halaman web) memaparkan antara muka pengguna anda dan menjalankan kod web anda.

Kedua-duanya tidak boleh mengakses sumber atau pemboleh ubah global satu sama lain secara langsung. Di sinilah Komunikasi Antara Proses (IPC) digunakan!

Mengapa IPC Penting

Bayangkan Proses Pemapar anda perlu:

Membaca fail daripada komputer pengguna.
Membuka kotak dialog natif.
Melaksanakan tugas berat tanpa membekukan antara muka pengguna.

Tindakan ini memerlukan akses kepada modul Node.js atau OS, yang dihadkan kepada Proses Utama demi keselamatan dan kestabilan. IPC menyediakan cara yang selamat untuk proses-proses ini berkomunikasi.

Modul Teras IPC: ipcMain dan ipcRenderer

Electron menyediakan dua modul khas untuk IPC:

ipcMain: Digunakan dalam Proses Utama untuk mendengar dan menghantar mesej.
ipcRenderer: Digunakan dalam Proses Pemapar untuk menghantar mesej kepada proses utama dan mendengar balasan.

Modul-modul ini menjadi tulang belakang komunikasi antara bahagian-bahagian berbeza aplikasi Electron anda.

Pemapar kepada Utama: Penghantaran Sehala

Komunikasi yang paling biasa berlaku daripada Proses Pemapar kepada Proses Utama. Anda boleh menghantar mesej menggunakan ipcRenderer.send().

Ini berguna untuk mencetuskan tindakan natif atau meminta data daripada proses utama tanpa memerlukan balasan segera dalam pemapar.

Kod: Pemapar kepada Utama (Klien)

Beginilah cara renderer.js menghantar mesej apabila butang diklik. Anda juga memerlukan index.html dengan butang (<button id="myButton">) yang memuatkan skrip ini.

const { ipcRenderer } = require('electron');

document.addEventListener('DOMContentLoaded', () => {
  const btn = document.getElementById('myButton');
  if (btn) {
    btn.addEventListener('click', () => {
      ipcRenderer.send('channel-name', 'Hello from Renderer!');
      console.log('Renderer sent message.');
    });
  }
});

Kod: Renderer ke Utama (Pelayan)

Ini ialah kod main.js. Kod ini menyediakan tetingkap Electron dan menggunakan ipcMain.on() untuk mendengar mesej pada 'channel-name' yang ditentukan.

Nota: nodeIntegration dan contextIsolation dipermudah di sini. Untuk aplikasi yang selamat, gunakan skrip pramuat.

const { app, BrowserWindow, ipcMain } = require('electron');
const path = require('path');

let mainWindow;

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true, // Simplified for demo
      contextIsolation: false // Simplified for demo
    }
  });

  mainWindow.loadFile('index.html');
  // Open the DevTools.
  // mainWindow.webContents.openDevTools()
}

app.whenReady().then(() => {
  createWindow();

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow();
    }
  });
});

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

// Handle messages from the renderer process
ipcMain.on('channel-name', (event, message) => {
  console.log('Main process received:', message);
  // Acknowledge or perform an action
});

Utama ke Renderer: Penghantaran Sehala

Proses Utama juga boleh menghantar mesej kepada Proses Renderer menggunakan mainWindow.webContents.send().

Ini berguna untuk menolak kemas kini daripada proses utama (contohnya, kemajuan dan perubahan data) kepada UI tanpa memerlukan renderer membuat permintaan.

Kod: Utama ke Renderer (Pelayan)

main.js ini akan menghantar mesej kepada renderer setelah tetingkap selesai dimuatkan. Kali ini, ipcMain tidak mendengar, sebaliknya menghantar!

const { app, BrowserWindow } = require('electron');
const path = require('path');

let mainWindow;

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    }
  });

  mainWindow.loadFile('index.html');

  // Send a message to the renderer after the window is ready
  mainWindow.webContents.on('did-finish-load', () => {
    mainWindow.webContents.send('main-channel', 'Update from Main!');
    console.log('Main sent message to renderer.');
  });

  mainWindow.on('closed', () => {
    mainWindow = null;
  });
}

app.whenReady().then(() => {
  createWindow();

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow();
    }
  });
});

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

Kod: Utama ke Renderer (Klien)

Dalam renderer.js anda, gunakan ipcRenderer.on() untuk mendengar mesej yang datang daripada proses utama. Kami akan memaparkannya dalam <div id="messageDisplay">.

const { ipcRenderer } = require('electron');

document.addEventListener('DOMContentLoaded', () => {
  const messageDiv = document.getElementById('messageDisplay');
  if (messageDiv) {
    ipcRenderer.on('main-channel', (event, message) => {
      messageDiv.innerText = `Received: ${message}`;
      console.log('Renderer received:', message);
    });
  }
});

Permintaan/Balasan dengan Invoke & Handle

Untuk interaksi yang lebih kompleks apabila Renderer memerlukan respons daripada Proses Utama, Electron menyediakan corak permintaan/balasan.

ipcRenderer.invoke(channel, ...args): Menghantar mesej daripada renderer dan menunggu respons.
ipcMain.handle(channel, listener): Dalam proses utama, menyediakan fungsi pengendali yang memproses permintaan dan mengembalikan nilai (atau Promise yang diselesaikan kepada suatu nilai).

Ini membolehkan komunikasi yang lebih tersusun dan tak segerak.

Semakan Pantas: Kaedah IPC

Manakah antara pernyataan berikut tentang modul IPC Electron yang TRUE?

Jawab dalam pelajaran interaktif

Imbas Kembali: Komunikasi Antara Proses

Tahniah! Anda telah mempelajari asas Komunikasi Antara Proses Electron.

IPC penting supaya Proses Utama dan Renderer boleh berinteraksi dengan selamat.
ipcMain dan ipcRenderer ialah modul teras.
Komunikasi sehala menggunakan ipcRenderer.send() (Renderer ke Utama) dan webContents.send() (Utama ke Renderer).
Untuk corak permintaan/balasan, ipcRenderer.invoke() dan ipcMain.handle() menyediakan penyelesaian yang kukuh.

Kini anda bersedia untuk membina aplikasi Electron yang lebih interaktif dan berkuasa!

Percuma untuk bermula

Pelajari JavaScript dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 12
Pelajaran: 47

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Komunikasi Antara Proses (IPC)” percuma?

Ya — teks penuh “Komunikasi Antara Proses (IPC)” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus Pembangunan Aplikasi Desktop Electron, tingkat taraf kepada CoddyKit PRO. Kursus Pembangunan Aplikasi Desktop Electron merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Komunikasi Antara Proses (IPC)”?

Pelajari cara melaksanakan saluran komunikasi yang selamat antara proses utama dan pemapar menggunakan modul IPC Electron seperti `ipcMain` dan `ipcRenderer`. Anda berlatih Pembangunan Aplikasi Desktop Electron menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Pembangunan Aplikasi Desktop Electron?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Pembangunan Aplikasi Desktop Electron di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 2 daripada 4.

Berapa lamakah pelajaran “Komunikasi Antara Proses (IPC)” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Pembangunan Aplikasi Desktop Electron ini?

Ya. Setiap pelajaran Pembangunan Aplikasi Desktop Electron menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

← Kembali ke Pembangunan Aplikasi Desktop Electron