RemoteMessenger Inter-Process Communication Flow

System Design · flowchart diagram · NOASSERTION

This flowchart illustrates the communication mechanism between a WebView and a Main Process using RemoteMessenger and postMessage for method calls and retu

Source: https://github.com/laurent22/joplin/blob/9e46f80713c5b7c13d40a21b137539b644748ac0/readme/dev/spec/plugins.md
Curated by laurent22
IPC WebViews Messaging Asynchronous Communication Frontend-Backend JavaScript Cross-Process

Mermaid source

flowchart
	postMessage(["postMessage({ kind: ReturnValueResponse, ... })"])
	rm2--6-->postMessage--7-->rm1
	subgraph WebView
		rm2["RemoteMessenger< WebViewApi,MainProcessApi >"]
		webViewApiImpl["webViewApiImpl.setCss"]
		webViewApiImpl--5-->rm2
	end
	subgraph MainProcess
		rm1["m1 = RemoteMessenger< MainProcessApi,WebViewApi >"]
		callMethod(["await m1.remoteApi.setCss('...')"])
		rm1--8-->callMethod
	end

What this diagram shows

The diagram details how a MainProcess initiates a method call (e.g., setCss) on a WebViewApi implementation within the WebView context. It highlights the role of RemoteMessenger instances (rm1 in MainProcess, rm2 in WebView) in abstracting postMessage for both sending the method call and receiving the ReturnValueResponse.

When to use it

Use this pattern when designing applications that require robust and structured inter-process communication, especially between a main application process and embedded web views, to invoke methods and handle responses asynchronously.

How to adapt it for your project

This pattern can be adapted for any client-server or inter-process communication where a messaging API like postMessage is available. The RemoteMessenger abstraction can be generalized to handle various message kinds (e.g., events, errors) beyond just method calls and return values, by defining different message payloads and handlers.

Key concepts