Cross-Process Remote Method Invocation

System Design · flowchart diagram · NOASSERTION

Illustrates how remote method invocation works between a Main Process and a WebView using postMessage and a RemoteMessenger for inter-process communication

Source: https://github.com/laurent22/joplin/blob/9e46f80713c5b7c13d40a21b137539b644748ac0/readme/dev/spec/plugins.md
Curated by laurent22
IPC RPC postMessage WebView Main Process RemoteMessenger Cross-Process

Mermaid source

flowchart
	postMessage(["postMessage({ kind: InvokeMethod, ... })"])
	rm1--2-->postMessage--3-->rm2
	subgraph MainProcess
		callMethod(["await m1.remoteApi.setCss('...')"])
		callMethod--1-->rm1
		rm1["m1 = RemoteMessenger< MainProcessApi,WebViewApi >"]
	end
	subgraph WebView
		rm2["RemoteMessenger< WebViewApi,MainProcessApi >"]
		webViewApiImpl["webViewApiImpl.setCss"]
		rm2--4-->webViewApiImpl
	end

What this diagram shows

This flowchart details the sequence of remote method invocation. A callMethod in the Main Process triggers RemoteMessenger (rm1), which uses postMessage to send the invocation to the WebView. The RemoteMessenger (rm2) in the WebView receives the message and dispatches it to the webViewApiImpl.setCss method.

When to use it

Useful when designing architectures that require secure and structured communication between distinct processes, such as an Electron main process and its renderer, or a browser's main thread and a Web Worker.

How to adapt it for your project

This pattern can be adapted for various IPC scenarios, including different messaging protocols, custom API definitions, or other environments where isolated processes need to interact, by swapping out postMessage for another transport.

Key concepts