การสื่อสาร IPC ระหว่างกระบวนการ

ipcMain.handle จะลงทะเบียนช่องทางที่ตั้งชื่อไว้ในกระบวนการหลักเพื่อรับคำขอจากกระบวนการเรนเดอร์และตอบกลับ โดยรับฟังก์ชันจัดการแบบอะซิงโครนัส และค่าที่ฟังก์ชันนี้ส่งกลับจะกลายเป็นค่าที่พรอมิสในกระบวนการเรนเดอร์ส่งกลับเมื่อเสร็จสมบูรณ์ จึงเหมาะอย่างยิ่งสำหรับการดำเนินการ เช่น การอ่านไฟล์หรือการค้นหาข้อมูลในฐานข้อมูล

ipcRenderer.invoke จะส่งข้อความผ่านช่องทางที่ตั้งชื่อไว้ และส่งคืนพรอมิสที่เสร็จสมบูรณ์พร้อมค่าที่ตัวจัดการของกระบวนการหลักส่งกลับ รูปแบบนี้สร้างรูปแบบคำขอและการตอบกลับแบบอะซิงโครนัสที่สะอาด และทำงานร่วมกับ async/await ได้อย่างเป็นธรรมชาติทั้งในสคริปต์ preload และคอมโพเนนต์ React

สคริปต์ preload จะครอบการเรียกใช้ ipcRenderer.invoke และเปิดเผยผ่าน contextBridge ตัวอย่างเช่น: api.readFile = (filePath) => ipcRenderer.invoke('read-file', filePath) กระบวนการเรนเดอร์เรียก window.api.readFile(path) และได้รับพรอมิสกลับมา ทั้งสะอาดและทำงานในแซนด์บ็อกซ์

เมื่อเปิดใช้ contextIsolation กระบวนการเรนเดอร์จะไม่สามารถเรียก require('electron') หรือนำเข้า ipcRenderer ได้โดยตรง เพราะโมดูลนี้จะไม่พร้อมใช้งานเลย การสื่อสาร IPC ทั้งหมดต้องผ่านการเปิดเผยของ contextBridge ในสคริปต์ preload นี่เป็นการออกแบบโดยตั้งใจ เพื่อป้องกันการโจมตี XSS ไม่ให้เข้าถึง IPC ได้

ipcMain.on จะรับฟังข้อความทางเดียวที่ส่งด้วย ipcRenderer.send (ไม่ใช่ invoke) โดยไม่มีช่องทางตอบกลับอัตโนมัติ รูปแบบนี้เหมาะกับการแจ้งเตือนหรือคำสั่งที่กระบวนการเรนเดอร์ไม่ต้องการคำตอบกลับ เช่น การบันทึกเหตุการณ์หรือการเรียกใช้การแจ้งเตือนของระบบ

กระบวนการหลักสามารถส่งข้อมูลไปยังกระบวนการเรนเดอร์โดยใช้ webContents.send('channel-name', data) นี่คือวิธีหลักที่กระบวนการหลักใช้เริ่มต้นการสื่อสาร ตัวอย่างเช่น การส่งต่อเหตุการณ์เฝ้าดูระบบไฟล์หรือการดำเนินการจากเมนูดั้งเดิมของระบบไปยังส่วนติดต่อผู้ใช้ React

ในสคริปต์โหลดล่วงหน้า ipcRenderer.on('update', callback) จะลงทะเบียนตัวรับฟังสำหรับข้อความแบบพุชจากกระบวนการหลัก ฟังก์ชันเรียกกลับจะได้รับเหตุการณ์และข้อมูลใด ๆ ที่กระบวนการหลักส่งมา จากนั้นคุณจึงส่งข้อมูลนั้นต่อไปยังกระบวนการแสดงผลผ่านฟังก์ชันที่ contextBridge เปิดเผยไว้

รูปแบบที่เป็นระเบียบสำหรับเหตุการณ์แบบพุชคือ: api.onUpdate = (callback) => ipcRenderer.on('update', (_event, data) => callback(data)) คอมโพเนนต์ React สมัครรับเหตุการณ์โดยเรียก window.api.onUpdate(setData) และฟังก์ชันเรียกกลับจะอัปเดตสถานะเมื่อกระบวนการหลักส่งข้อมูลใหม่มา

ต้องนำตัวรับฟังของ ipcRenderer.on ทุกตัวออกเมื่อไม่จำเป็นต้องใช้แล้ว เพื่อป้องกันหน่วยความจำรั่วไหลและการเรียกกลับซ้ำ ฟังก์ชันโหลดล่วงหน้าควรคืนฟังก์ชันล้างข้อมูล เช่น () => ipcRenderer.removeListener('update', callback) ซึ่ง React จะเรียกจากค่าที่คืนในส่วนล้างข้อมูลของ useEffect

ควรถือว่าข้อมูลนำเข้าจากกระบวนการแสดงผลเป็นข้อมูลที่ไม่น่าเชื่อถือภายในตัวจัดการของกระบวนการหลัก ตรวจสอบเส้นทางไฟล์เสมอเพื่อป้องกันการโจมตีแบบไต่ผ่านเส้นทาง ทำความสะอาดพารามิเตอร์คำค้น และตรวจสอบว่าต้นทางของผู้ส่งเป็นต้นทางที่คาดไว้ ห้ามเปิดเผยช่องทาง IPC ทั่วไปสำหรับ eval หรือ exec โดยเด็ดขาด

เมื่อแอปของคุณมีขนาดใหญ่ขึ้น ให้จัดระเบียบช่องทาง IPC ด้วยแนวทางการตั้งชื่อแบบเนมสเปซ เช่น 'fs:read-file', 'db:query', 'window:minimize' เก็บชื่อช่องทางไว้ในไฟล์ค่าคงที่ที่ใช้ร่วมกัน ซึ่งทั้ง main.js และสคริปต์โหลดล่วงหน้านำเข้าไว้ เพื่อป้องกันการพิมพ์ผิดและทำให้การปรับโครงสร้างโค้ดปลอดภัยยิ่งขึ้น

ค่าที่ตัวจัดการ ipcMain.handle คืนกลับจะเกิดอะไรขึ้น

IPC คือแกนหลักของการสื่อสารใน Electron โดย ipcMain.handle และ ipcRenderer.invoke เป็นคู่คำขอและการตอบกลับที่อิงตามพรอมิสสำหรับการดำเนินการที่เริ่มจากกระบวนการแสดงผล ส่วนการส่งข้อมูลแบบพุชที่เริ่มจากกระบวนการหลักนั้น webContents.send และ ipcRenderer.on จะทำงานร่วมกัน การสื่อสาร IPC ทั้งหมดในกระบวนการแสดงผลต้องส่งผ่าน contextBridge ของสคริปต์โหลดล่วงหน้า และควรล้างตัวรับฟังอยู่เสมอเพื่อป้องกันหน่วยความจำรั่วไหล