ipcrenderer preload.js 1

ipcrenderer preload.js

const {
    contextBridge,
    ipcRenderer
} = require("electron");

// Expose protected methods that allow the renderer process to use
// the ipcRenderer without exposing the entire object
contextBridge.exposeInMainWorld(
    "api", {
        //send: (channel, data) => {
        request: (channel, data) => {
            // whitelist channels
            let validChannels = ["toMain"];
            if (validChannels.includes(channel)) {
                ipcRenderer.send(channel, data);
            }
        },
        //receive: (channel, func) => {
        response: (channel, func) => {
            let validChannels = ["fromMain"];
            if (validChannels.includes(channel)) {
                // Deliberately strip event as it includes `sender` 
                ipcRenderer.on(channel, (event, ...args) => func(...args));
            }
        }
    }
);

Here is what the above code is Doing:
1. We’re using the contextBridge module to expose the ipcRenderer object to the renderer process.
2. We’re using the contextBridge module to expose the ipcMain object to the main process.
3. We’re using the ipcRenderer object to send messages to the main process.
4. We’re using the ipcMain object to send messages to the renderer process.
5. We’re using the ipcRenderer object to listen for messages from the main process.
6. We’re using the ipcMain object to listen for messages from the renderer process.

Now that we have the bridge set up, we can use the ipcRenderer and ipcMain objects to send messages between the main and renderer processes.

Sending Messages from the Renderer Process to the Main Process

To send a message from the renderer process to the main process, we use the ipcRenderer.send() method.

The ipcRenderer.send() method takes two arguments:

1. The channel to send the message on.
2. The message to send.

The channel is a string that can be anything you want. It’s used to identify the type of message that’s being sent.

The message can be any type of data that can be serialized to JSON.

Here’s an example of sending a message from the renderer process to the main process:

// Send a message to the main process.
ipcRenderer.send(‘toMain’, ‘ping’);

Sending Messages from the Main Process to the Renderer Process

To send a message from the main process to the renderer process, we use the ipcMain.send() method.

The ipcMain.send() method takes two arguments:

1. The channel to send the message on.
2. The message to send.

The channel is a string that can be anything you want. It’s used to identify the type of message that’s being sent.

The message can be any type of data that can be serialized to JSON.

Here’s an example of sending a message from the main process to the renderer process:

// Send a message to the renderer process.
ipcMain.send(‘fromMain’, ‘pong’);

Listening for Messages from the Main Process in the Renderer Process

To listen for messages from the main process in the renderer process, we use the ipcRenderer.on() method.

The ipcRenderer.on() method takes two arguments:

1. The channel to listen for messages on.
2. A callback function to run when a message is received.

The channel is a string that can be anything you want. It’s used to identify the type of message that’s being sent.

The callback function is called when a message is received on the specified channel. The callback function takes two arguments:

1. The event object.
2. The message that was sent.

Here’s an example of listening for messages from the main process in the renderer process:

// Listen for messages from the main process.
ipcRenderer.on(‘fromMain’, (event, message) => {
// Print the message from the main process.
console.log(message);
});

Listening for Messages from the Renderer Process in the Main Process

To listen for messages from the renderer process in the main process, we use the ipcMain.on() method.

The ipcMain.on() method takes two arguments:

1. The channel to listen for messages on.
2.

Similar Posts