How to send request & process reply as a combined operation, from renderer process in Electron

[thehans]

Hello, I am converting a web app to electron and attempting to utilize seriaport for device communications.
The app is essentially control software for an appliance which is connected over USB serial.

The device under control uses a simple line-based protocol: read one line of serial data, then send a line of reply (using /r/n delimiters). I would like be able to send a message and receive the reply as single operation, much like an ajax request.

So I would like to something similar to this:

in renderer code, with serial being my contextBridge apiKey

window.serial.TxRx(msg, responseHandler);     // callback style
window.serial.Tx(msg).then(responseHandler); // OR promises based

The problem is that IPC has to copy arguments across processes, using the Structured Clone Algorithm which is not capable of copying functions. So clearly the callback style cannot work, as we can't pass responseHandler to TxRx.

The promise based version doesn't pass responseHandler argument directly to the ipc handler, so it almost looks like that could work. However, in my admittedly limited understanding of promises, i think even trying some promise-based solution wouldn't workaround the issue, and would still require copying the .then( ... ) argument across processes at some level?

Without any way to pass functions around, I feel completely lost as to how to get anything done.
Can anyone help me understand how one is meant to properly send a message and then process the reply?

Below is a rough summary of most of the relevant code I am attempting to use for this.

serial.js

const { SerialPort } = require('serialport')
const { ReadlineParser } = require('@serialport/parser-readline')

let connections = {};

function initPort(name) {
  if (!connections[name]) {
    const serial = new SerialPort({ path: name, baudRate: 115200 });
    const parser = serial.pipe(new ReadlineParser({ delimiter: '\n' }));
    let conn = {
      "serial": serial,
      "parser": parser
    };
    parser.on('data', (data) => {
      if (conn.callback) {
        let f = conn.callback;
        conn.callback = null;
        f(data);
      }
    });
    connections[name] = conn;
  }
}

function TxRx(command, cb, port_name) {
  if (!port_name) port_name = TxRx.defaultPort;
  let conn = connections[port_name];
  const port = conn.serial;
  conn.callback = cb;
  conn.txStart = Date.now();
  port.write(Buffer.from(` ${command} \r\n`));
  port.drain();
  conn.txEnd = Date.now();
}

module.exports = {
  "initPort": initPort,
  "TxRx": TxRx
};

preload.js

const { contextBridge, ipcRenderer } = require('electron')
contextBridge.exposeInMainWorld('serial', {
  setDefaultPort: (port) => ipcRenderer.send('serial-set-default-port', port),
  initPort: (name) => ipcRenderer.send('serial-init-port', name),
  TxRx: (command, cb, port_name) => ipcRenderer.sendSync('serial-TxRx', command, cb, port_name),
})

main.js

const { app, process, ipcMain, BrowserWindow } = require('electron')
const path = require('path')
const serial = require('./serial.js')

app.whenReady().then(() => {
  // serial
  ipcMain.on('serial-set-default-port', (port) => { serial.TxRx.defaultPort = port; });
  ipcMain.on('serial-init-port', serial.initPort);
  ipcMain.handle('serial-TxRx', (event, command, cb, port_name) => { serial.TxRx(command, cb, port_name); });

  let win = new BrowserWindow({
    webPreferences: {
      preload: POD_CONTROLLER_PRELOAD_WEBPACK_ENTRY,
      nodeIntegration: false,
      contextIsolation: true,
      enableRemoteModule: false,
      webSecurity: true,
      sandbox: true,
    }
  })
  win.loadURL(POD_CONTROLLER_WEBPACK_ENTRY)
})

[Dardin-dale]

I tend to do something like this, where I keep my device commands contained to the main process and only expose the commands that I want available in the UI, I typically use a Promise Queue to prevent cross talk:

myDevice.js -> API for the device, returns data from the serialport

async function ack_call(self, resolve, reject, cmd) {
    try {
        self.port.once('error', err => reject(err))
        let timer = setTimeout(() => {
          self.port.removeAllListeners('error')
          reject("Device Timed out.")
        }, 5000);
        
        self.port.write(cmd, function(err) {
            if (err) {
              self.port.removeAllListeners('error')
              reject(err);
            } 
            //messege sent successfully
        });

        self.parser.once('data', (data) => {
            let msg = data.toString('ascii');
            let checksum = msg[1].trim();
            let info = msg[0].split(",");
            if (info[0] === "!NACK") {
                clearTimeout(timer)
                self.port.removeAllListeners('error')
                reject("Command: " + cmd + " not properly Ack'd!")
            }
            if(!valid_checksum(msg[0], checksum)){
                clearTimeout(timer)
                self.port.removeAllListeners('error')
                reject("Invalid checksum, Data corrupt");
            }
            clearTimeout(timer);
            self.port.removeAllListeners('error')
            resolve(info[2]);
        })
    } catch (err) {
       reject(err);
    }
}

class myDevice {
    constructor(id) {
         this.path = id;
         this.parser = new ReadlineParser({delimiter: '\r', 
            encoding: 'ascii'});
         this.port = new Serialport({path: id, baudRate: 115200}, 
            function (err) {
               throw "Unable to initiate port: "+ err;
            });
         this.queue = new PQueue({concurrency: 1});

         this.port.pipe(this.parser);
    }

    ledOn() {
        let self = this;
        let cmd = Buffer.from("!LED,1\r", 'ascii');
        return this.queue.add(
            new Promise((resolve, reject) => {
                ack_call(self, resolve, reject, cmd);
            })
        );
    }

device_manager.js -> collects list of coms/opens serialports available for the UI

preload.js

contextBridge.exposeInMainWorld("API", {
      device_do_thing: (port, arg) => ipcRenderer.invoke('device/do_thing', port, arg),

routes/device.js

ipcMain.handle('device/do_thing',  async(_event, port, arg) => {
        try{
            let device = deviceManager.getDevice(port)
            let result = await device.do_thing(arg);
            return result;
        } catch (err) {
            return err
        }
    });

I recommend using the promise queue, but this approach lets you keep everything in promises. I also recommend keeping ports open in the deviceManager collection to reduce the overhead of opening the port every call. This is why I have the removeListeners in the ack_call so that it doesn't get overloaded with 'error' listeners.