Electron Adapter

Establish type-safe communication between processes in Electron using the Message Port Adapter. Before you start, we recommend reading the MessagePorts in Electron guide.

Main Process

Listen for a port sent from the renderer, then upgrade it:

import { experimental_RPCHandler as RPCHandler } from '@orpc/server/message-port'
import { router } from './router'

const handler = new RPCHandler(router)

app.whenReady().then(() => {
  ipcMain.on('start-orpc-server', async (event) => {
    const [serverPort] = event.ports
    handler.upgrade(serverPort)
    serverPort.start()
  })
})

INFO

Channel start-orpc-server is arbitrary. you can use any name that fits your needs.

Preload Process

Receive the port from the renderer and forward it to the main process:

window.addEventListener('message', (event) => {
  if (event.data === 'start-orpc-client') {
    const [serverPort] = event.ports

    ipcRenderer.postMessage('start-orpc-server', null, [serverPort])
  }
})

Renderer Process

Create a MessageChannel, send one port to the preload script, and use the other to initialize the client link:

const { port1: clientPort, port2: serverPort } = new MessageChannel()

window.postMessage('start-orpc-client', '*', [serverPort])

const link = new RPCLink({
  port: clientPort,
})

clientPort.start()

INFO

This only shows how to configure the link. For full client examples, see Client-Side Clients.