How could I trigger an Electron api from an external server? - reactjs

Question

new to Electron development and I here's the idea I'm trying to implement:
I want to make a request to an express server from a website that's not my electron app with a payload of data and for that express route to respond by focusing the electron browser window and sending the electron app the request payload for it to display.
Currently have an Electron app using loadFile to render an html.index which loads a bundled React application. I know you can use ipcMain/ipcRenderer to talk between the main electron process and the react app renderer process, but I don't know how I would go about having my express app talking to electron.
Also not sure about how I would send the request payload to the electron application from the express route. Would I need to create a websocket or event emitter of some kind for the renderer process (the react app) to receive messages directly from the server?
tldr: I want to call browserWindow.focus() from an express route and then send the req payload to the front end application for display

Answer 1

You can do this with websockets/socket.io.
using socket.io, essentially you’ll just have a socket emission in the callback of your http request.
here's a small example:
in your express application, setup a socket.io server with a route that emits a focus-window event:
const app = require('express')()
const http = require('http').createServer(app)
const io = require('socket.io')(http)
app.post('/focus-window, (req, res) => {
io.emit('focus-window')
res.send(200)
});
io.on('connection', (socket) => {
// connections here
console.log('a user connected');
});
http.listen(3000, () => {
console.log('listening on *:3000');
});
in your electron main process, setup a socket client using socket.io-client that has access to the BrowserWindow object like this:
const { app, BrowserWindow } = require('electron')
const socket = require('socket.io-client')('http://localhost:3000')
const path = require('path')
function createWindow () {
// Create the browser window.
const win = new BrowserWindow({
width: 400,
height: 600
})
// and load the index.html of the app.
win.loadFile(path.resolve('dist/index.html'))
// setup your socket listeners
socket.on('connect', function(){
console.log('socket.io-client connected')
})
// here it is listening for the focus-window event
socket.on('focus-window', () => {
win.focus()
})
}
app.whenReady().then(createWindow)
you can then use the socket emitter to send info to the electron app and then use electron's ipc to send the information to the react renderer process (conceptually, I haven't tested this)