Skip to main content

Client process setup

Introduction​

The BrowserWindow and ChildProcess are considered as the clients by the library, as you're not able to use those processes to forward the messages to any other process than main one. Beside that aspect, Broker object created on them uses the same API and features, as the one spawned on main process.

BrowserWindow​

This example uses React as frontend framework, but rest of the code is universal, and you can apply it to any framework of your choice. Connecting the BrowserWindow is simple and fast as you can see in following example:

/src/renderer/index.tsx
import 'reflect-metadata';
import { Broker, BrokerClient, BrokerFactory } from 'electron-broker';
import React from 'react';
import ReactDOM from 'react-dom';

let broker: Broker;

async function createBroker() {
  broker = await BrokerFactory.createRendererBroker({
    secure: true,
  });

  broker.start();
}

async function init() {
  await createBroker();

  ReactDOM.render(
    <App />,
    document.getElementById('root'),
  );
}

init();

The secure property is used to indicate if your BrowserWindow is using preload.js file, but if you're not planning to use it, make sure to set this property to false, to make Broker send and receive messages by directly accessing ipcRenderer object.

ChildProcess​

Connecting the ChildProcess is pretty straightforward, let's look at the following example:

/src/child/index.ts
import 'reflect-metadata';
import { Broker, BrokerClient, BrokerFactory } from 'electron-broker';

let broker: Broker;

async function createBroker() {
  broker = await BrokerFactory.createProcessBroker();

  broker.start();
}

async function init() {
  await createBroker();
}

init();

The Broker on ChildProcess does not require any further configuration, to start sending and receiving messages.