2022-02-09 16:00:05 +00:00
---
title: "ipcRenderer"
description: "Communicate asynchronously from a renderer process to the main process."
slug: ipc-renderer
hide_title: false
---
2015-11-10 08:48:24 +00:00
# ipcRenderer
2013-08-14 22:43:35 +00:00
2016-04-21 22:39:12 +00:00
> Communicate asynchronously from a renderer process to the main process.
2016-04-21 22:35:29 +00:00
2016-11-23 19:20:56 +00:00
Process: [Renderer ](../glossary.md#renderer-process )
2016-11-03 17:26:00 +00:00
2019-07-22 15:20:43 +00:00
The `ipcRenderer` module is an [EventEmitter][event-emitter]. It provides a few
2016-01-13 15:18:12 +00:00
methods so you can send synchronous and asynchronous messages from the render
2017-11-29 10:58:24 +00:00
process (web page) to the main process. You can also receive replies from the
2016-01-13 15:18:12 +00:00
main process.
2015-08-27 00:56:10 +00:00
2022-02-09 16:00:05 +00:00
See [IPC tutorial ](../tutorial/ipc.md ) for code examples.
2013-08-14 22:43:35 +00:00
2016-11-03 03:04:03 +00:00
## Methods
2015-08-27 00:56:10 +00:00
2016-11-05 08:42:45 +00:00
The `ipcRenderer` module has the following method to listen for events and send messages:
2015-08-27 00:56:10 +00:00
2016-02-16 03:34:39 +00:00
### `ipcRenderer.on(channel, listener)`
2015-08-27 00:56:10 +00:00
2021-11-16 04:13:18 +00:00
* `channel` string
2016-02-16 03:34:39 +00:00
* `listener` Function
2023-07-20 18:43:08 +00:00
* `event` [IpcRendererEvent][ipc-renderer-event]
2019-02-19 09:24:19 +00:00
* `...args` any[]
2015-11-10 08:48:24 +00:00
2016-02-16 03:34:39 +00:00
Listens to `channel` , when a new message arrives `listener` would be called with
`listener(event, args...)` .
2015-11-10 08:48:24 +00:00
2016-02-16 03:34:39 +00:00
### `ipcRenderer.once(channel, listener)`
2016-01-13 15:18:12 +00:00
2021-11-16 04:13:18 +00:00
* `channel` string
2016-02-16 03:34:39 +00:00
* `listener` Function
2023-07-20 18:43:08 +00:00
* `event` [IpcRendererEvent][ipc-renderer-event]
2019-02-19 09:24:19 +00:00
* `...args` any[]
2016-01-13 15:18:12 +00:00
2016-02-16 03:34:39 +00:00
Adds a one time `listener` function for the event. This `listener` is invoked
only the next time a message is sent to `channel` , after which it is removed.
2016-01-13 15:18:12 +00:00
2016-02-16 03:34:39 +00:00
### `ipcRenderer.removeListener(channel, listener)`
2016-01-13 15:18:12 +00:00
2021-11-16 04:13:18 +00:00
* `channel` string
2016-02-16 03:34:39 +00:00
* `listener` Function
2019-05-06 15:29:01 +00:00
* `...args` any[]
2016-01-13 15:18:12 +00:00
2016-02-16 03:34:39 +00:00
Removes the specified `listener` from the listener array for the specified
`channel` .
2016-01-13 15:18:12 +00:00
2017-08-29 06:12:55 +00:00
### `ipcRenderer.removeAllListeners(channel)`
2016-01-13 15:18:12 +00:00
2021-11-16 04:13:18 +00:00
* `channel` string
2016-02-16 03:34:39 +00:00
Removes all listeners, or those of the specified `channel` .
2016-01-13 15:18:12 +00:00
2019-06-04 21:03:24 +00:00
### `ipcRenderer.send(channel, ...args)`
2015-08-27 00:56:10 +00:00
2021-11-16 04:13:18 +00:00
* `channel` string
2016-11-05 08:42:45 +00:00
* `...args` any[]
2015-08-27 00:56:10 +00:00
2019-10-09 17:59:08 +00:00
Send an asynchronous message to the main process via `channel` , along with
arguments. Arguments will be serialized with the [Structured Clone
2020-03-12 01:07:54 +00:00
Algorithm][SCA], just like [`window.postMessage`][], so prototype chains will not be
2019-10-09 17:59:08 +00:00
included. Sending Functions, Promises, Symbols, WeakMaps, or WeakSets will
throw an exception.
2020-11-17 19:11:40 +00:00
> **NOTE:** Sending non-standard JavaScript types such as DOM objects or
2021-01-26 22:14:44 +00:00
> special Electron objects will throw an exception.
>
> Since the main process does not have support for DOM objects such as
2020-11-17 19:11:40 +00:00
> `ImageBitmap`, `File`, `DOMMatrix` and so on, such objects cannot be sent over
> Electron's IPC to the main process, as the main process would have no way to decode
> them. Attempting to send such objects over IPC will result in an error.
2019-05-31 17:25:19 +00:00
The main process handles it by listening for `channel` with the
2022-02-09 16:00:05 +00:00
[`ipcMain` ](./ipc-main.md ) module.
2019-05-31 17:25:19 +00:00
2020-03-12 01:07:54 +00:00
If you need to transfer a [`MessagePort`][] to the main process, use [`ipcRenderer.postMessage` ](#ipcrendererpostmessagechannel-message-transfer ).
If you want to receive a single response from the main process, like the result of a method call, consider using [`ipcRenderer.invoke` ](#ipcrendererinvokechannel-args ).
2019-06-04 21:03:24 +00:00
### `ipcRenderer.invoke(channel, ...args)`
2019-05-31 17:25:19 +00:00
2021-11-16 04:13:18 +00:00
* `channel` string
2019-05-31 17:25:19 +00:00
* `...args` any[]
Returns `Promise<any>` - Resolves with the response from the main process.
2019-10-09 17:59:08 +00:00
Send a message to the main process via `channel` and expect a result
asynchronously. Arguments will be serialized with the [Structured Clone
2020-03-12 01:07:54 +00:00
Algorithm][SCA], just like [`window.postMessage`][], so prototype chains will not be
2019-10-09 17:59:08 +00:00
included. Sending Functions, Promises, Symbols, WeakMaps, or WeakSets will
throw an exception.
2019-05-31 17:25:19 +00:00
The main process should listen for `channel` with
2022-02-09 16:00:05 +00:00
[`ipcMain.handle()` ](./ipc-main.md#ipcmainhandlechannel-listener ).
2019-05-31 17:25:19 +00:00
For example:
2020-11-05 22:12:43 +00:00
2023-06-05 07:26:26 +00:00
```javascript @ts -type={someArgument:unknown} @ts -type={doSomeWork:(arg:unknown)=>Promise< unknown > }
2019-05-31 17:25:19 +00:00
// Renderer process
ipcRenderer.invoke('some-name', someArgument).then((result) => {
// ...
})
// Main process
ipcMain.handle('some-name', async (event, someArgument) => {
const result = await doSomeWork(someArgument)
return result
})
```
2013-08-14 22:43:35 +00:00
2020-03-12 01:07:54 +00:00
If you need to transfer a [`MessagePort`][] to the main process, use [`ipcRenderer.postMessage` ](#ipcrendererpostmessagechannel-message-transfer ).
2020-08-11 14:31:38 +00:00
If you do not need a response to the message, consider using [`ipcRenderer.send` ](#ipcrenderersendchannel-args ).
2020-03-12 01:07:54 +00:00
2022-10-26 20:56:41 +00:00
> **Note**
> Sending non-standard JavaScript types such as DOM objects or
> special Electron objects will throw an exception.
>
> Since the main process does not have support for DOM objects such as
> `ImageBitmap`, `File`, `DOMMatrix` and so on, such objects cannot be sent over
> Electron's IPC to the main process, as the main process would have no way to decode
> them. Attempting to send such objects over IPC will result in an error.
> **Note**
> If the handler in the main process throws an error,
> the promise returned by `invoke` will reject.
> However, the `Error` object in the renderer process
> will not be the same as the one thrown in the main process.
2019-06-04 21:03:24 +00:00
### `ipcRenderer.sendSync(channel, ...args)`
2013-08-14 22:43:35 +00:00
2021-11-16 04:13:18 +00:00
* `channel` string
2016-11-05 08:42:45 +00:00
* `...args` any[]
2013-08-14 22:43:35 +00:00
2022-02-09 16:00:05 +00:00
Returns `any` - The value sent back by the [`ipcMain` ](./ipc-main.md ) handler.
2017-06-27 19:01:39 +00:00
2019-10-09 17:59:08 +00:00
Send a message to the main process via `channel` and expect a result
synchronously. Arguments will be serialized with the [Structured Clone
2023-01-16 09:22:49 +00:00
Algorithm][SCA], just like [`window.postMessage`][], so prototype chains will not be
2019-10-09 17:59:08 +00:00
included. Sending Functions, Promises, Symbols, WeakMaps, or WeakSets will
throw an exception.
2021-01-26 22:14:44 +00:00
> **NOTE:** Sending non-standard JavaScript types such as DOM objects or
> special Electron objects will throw an exception.
>
> Since the main process does not have support for DOM objects such as
2020-11-17 19:11:40 +00:00
> `ImageBitmap`, `File`, `DOMMatrix` and so on, such objects cannot be sent over
> Electron's IPC to the main process, as the main process would have no way to decode
> them. Attempting to send such objects over IPC will result in an error.
2022-02-09 16:00:05 +00:00
The main process handles it by listening for `channel` with [`ipcMain` ](./ipc-main.md ) module,
2016-02-16 03:34:39 +00:00
and replies by setting `event.returnValue` .
2013-08-14 22:43:35 +00:00
2019-10-09 17:59:08 +00:00
> :warning: **WARNING**: Sending a synchronous message will block the whole
> renderer process until the reply is received, so use this method only as a
> last resort. It's much better to use the asynchronous version,
2022-02-09 16:00:05 +00:00
> [`invoke()`](./ipc-renderer.md#ipcrendererinvokechannel-args).
2014-12-17 19:09:11 +00:00
2020-03-12 01:07:54 +00:00
### `ipcRenderer.postMessage(channel, message, [transfer])`
2021-11-16 04:13:18 +00:00
* `channel` string
2020-03-12 01:07:54 +00:00
* `message` any
* `transfer` MessagePort[] (optional)
Send a message to the main process, optionally transferring ownership of zero
or more [`MessagePort`][] objects.
The transferred `MessagePort` objects will be available in the main process as
2022-02-09 16:00:05 +00:00
[`MessagePortMain` ](./message-port-main.md ) objects by accessing the `ports`
2020-03-12 01:07:54 +00:00
property of the emitted event.
For example:
2020-11-05 22:12:43 +00:00
2020-03-12 01:07:54 +00:00
```js
// Renderer process
const { port1, port2 } = new MessageChannel()
ipcRenderer.postMessage('port', { message: 'hello' }, [port1])
// Main process
ipcMain.on('port', (e, msg) => {
const [port] = e.ports
// ...
})
```
For more information on using `MessagePort` and `MessageChannel` , see the [MDN
documentation](https://developer.mozilla.org/en-US/docs/Web/API/MessageChannel).
2023-07-21 09:16:44 +00:00
### `ipcRenderer.sendTo(webContentsId, channel, ...args)` _Deprecated_
2017-10-18 01:35:19 +00:00
2021-11-16 04:13:18 +00:00
* `webContentsId` number
* `channel` string
2017-10-18 01:35:19 +00:00
* `...args` any[]
2018-10-26 15:18:47 +00:00
Sends a message to a window with `webContentsId` via `channel` .
2017-10-18 01:35:19 +00:00
2019-06-04 21:03:24 +00:00
### `ipcRenderer.sendToHost(channel, ...args)`
2014-12-17 19:09:11 +00:00
2021-11-16 04:13:18 +00:00
* `channel` string
2016-11-05 08:42:45 +00:00
* `...args` any[]
2014-12-17 19:09:11 +00:00
2015-11-10 08:48:24 +00:00
Like `ipcRenderer.send` but the event will be sent to the `<webview>` element in
the host page instead of the main process.
2018-09-01 01:13:51 +00:00
2019-07-22 15:20:43 +00:00
[event-emitter]: https://nodejs.org/api/events.html#events_class_eventemitter
2019-10-09 17:59:08 +00:00
[SCA]: https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm
2020-03-12 01:07:54 +00:00
[`window.postMessage`]: https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
[`MessagePort`]: https://developer.mozilla.org/en-US/docs/Web/API/MessagePort
2023-07-20 18:43:08 +00:00
[ipc-renderer-event]: ./structures/ipc-renderer-event.md