MessagePorts in Electron

    Here is a very brief example of what a MessagePort is and how it works:

    1. // main.js ///////////////////////////////////////////////////////////////////
    2. // In the main process, we receive the port.
    3. ipcMain.on('port', (event) => {
    4.   // When we receive a MessagePort in the main process, it becomes a
    5.   // MessagePortMain.
    6.   const port = event.ports[0]
    8.   // MessagePortMain uses the Node.js-style events API, rather than the
    9.   // web-style events API. So .on('message', ...) instead of .onmessage = ...
    10.   port.on('message', (event) => {
    11.     // data is { answer: 42 }
    12.     const data = event.data
    13.   })
    15.   // MessagePortMain queues messages until the .start() method has been called.
    16.   port.start()
    17. })

    The Channel Messaging API documentation is a great way to learn more about how MessagePorts work.

    MessagePort objects can be created in either the renderer or the main process, and passed back and forth using the and WebContents.postMessage methods. Note that the usual IPC methods like send and invoke cannot be used to transfer MessagePorts, only the postMessage methods can transfer MessagePorts.

    By passing MessagePorts via the main process, you can connect two pages that might not otherwise be able to communicate (e.g. due to same-origin restrictions).

    In the renderer, you can listen for the close event either by assigning to port.onclose or by calling port.addEventListener('close', ...). In the main process, you can listen for the close event by calling port.on('close', ...).

    In this example, your app has a worker process implemented as a hidden window. You want the app page to be able to communicate directly with the worker process, without the performance overhead of relaying via the main process.

    1. // main.js ///////////////////////////////////////////////////////////////////
    2. const { BrowserWindow, app, ipcMain, MessageChannelMain } = require('electron')
    4. app.whenReady().then(async () => {
    5.   // The worker process is a hidden BrowserWindow, so that it will have access
    6.   // to a full Blink context (including e.g. <canvas>, audio, fetch(), etc.)
    7.   const worker = new BrowserWindow({
    8.     show: false,
    9.     webPreferences: { nodeIntegration: true }
    10.   })
    11.   await worker.loadFile('worker.html')
    13.   // The main window will send work to the worker process and receive results
    14.   // over a MessagePort.
    15.   const mainWindow = new BrowserWindow({
    16.     webPreferences: { nodeIntegration: true }
    17.   })
    18.   mainWindow.loadFile('app.html')
    20.   // We can't use ipcMain.handle() here, because the reply needs to transfer a
    22.   ipcMain.on('request-worker-channel', (event) => {
    23.     // For security reasons, let's make sure only the frames we expect can
    24.     // access the worker.
    25.     if (event.senderFrame === mainWindow.webContents.mainFrame) {
    26.       // Create a new channel ...
    27.       const { port1, port2 } = new MessageChannelMain()
    28.       // ... send one end to the worker ...
    29.       // ... and the other end to the main window.
    30.       event.senderFrame.postMessage('provide-worker-channel', null, [port2])
    31.       // Now the main window and the worker can communicate with each other
    32.       // without going through the main process!
    33.     }
    34.   })
    35. })
    1. <!-- app.html --------------------------------------------------------------->
    2. <script>
    3. const { ipcRenderer } = require('electron')
    5. // We request that the main process sends us a channel we can use to
    6. // communicate with the worker.
    7. ipcRenderer.send('request-worker-channel')
    9. ipcRenderer.once('provide-worker-channel', (event) => {
    10.   // Once we receive the reply, we can take the port...
    11.   const [ port ] = event.ports
    12.   // ... register a handler to receive results ...
    13.   port.onmessage = (event) => {
    14.     console.log('received result:', event.data)
    15.   }
    16.   // ... and start sending it work!
    17.   port.postMessage(21)
    18. })
    19. </script>
    1. // renderer.js ///////////////////////////////////////////////////////////////
    3. const makeStreamingRequest = (element, callback) => {
    4.   // MessageChannels are lightweight--it's cheap to create a new one for each
    5.   // request.
    6.   const { port1, port2 } = new MessageChannel()
    8.   // We send one end of the port to the main process ...
    9.   ipcRenderer.postMessage(
    10.     'give-me-a-stream',
    11.     { element, count: 10 },
    12.     [port2]
    13.   )
    15.   // ... and we hang on to the other end. The main process will send messages
    16.   // to its end of the port, and close it when it's finished.
    17.   port1.onmessage = (event) => {
    18.     callback(event.data)
    19.   }
    20.   port1.onclose = () => {
    22.   }
    23. }
    25. makeStreamingRequest(42, (data) => {
    26. })
    27. // We will see "got response data: 42" 10 times.

    When is enabled, IPC messages from the main process to the renderer are delivered to the isolated world, rather than to the main world. Sometimes you want to deliver messages to the main world directly, without having to step through the isolated world.

    1. // main.js ///////////////////////////////////////////////////////////////////
    2. const { BrowserWindow, app, MessageChannelMain } = require('electron')
    3. const path = require('path')
    5. app.whenReady().then(async () => {
    6.   // Create a BrowserWindow with contextIsolation enabled.
    7.   const bw = new BrowserWindow({
    8.     webPreferences: {
    9.       contextIsolation: true,
    10.       preload: path.join(__dirname, 'preload.js')
    11.     }
    12.   })
    13.   bw.loadURL('index.html')
    15.   // We'll be sending one end of this channel to the main world of the
    16.   // context-isolated page.
    17.   const { port1, port2 } = new MessageChannelMain()
    19.   // It's OK to send a message on the channel before the other end has
    20.   // registered a listener. Messages will be queued until a listener is
    21.   // registered.
    22.   port2.postMessage({ test: 21 })
    24.   // We can also receive messages from the main world of the renderer.
    25.   port2.on('message', (event) => {
    26.     console.log('from renderer main world:', event.data)
    27.   })
    28.   port2.start()
    30.   // The preload script will receive this IPC message and transfer the port
    31.   // over to the main world.
    32.   bw.webContents.postMessage('main-world-port', null, [port1])
    33. })
    1. // preload.js ////////////////////////////////////////////////////////////////
    2. const { ipcRenderer } = require('electron')
    4. // We need to wait until the main world is ready to receive the message before
    5. // sending the port. We create this promise in the preload so it's guaranteed
    6. // to register the onload listener before the load event is fired.
    7. const windowLoaded = new Promise(resolve => {
    8.   window.onload = resolve
    9. })
    11. ipcRenderer.on('main-world-port', async (event) => {
    12.   await windowLoaded
    13.   // We use regular window.postMessage to transfer the port from the isolated
    14.   // world to the main world.
    15.   window.postMessage('main-world-port', '*', event.ports)
    16. })