The web page communicates with Electron

background

One feature on the site is to add tasks to a desktop app based on the Electron implementation. In practice, I tried to use and summarize the following solutions. Have wrong place or better plan welcome to point out or to add.

Communication by protocol

Communication using custom protocols

The custom protocol DemoApp is registered in the main process

// Registration agreement
protocol.registerSchemesAsPrivileged([
  { scheme: 'demoapp'.privileges: { secure: true.standard: true}}])/ / to monitor
app.on("open-url".async (event, url) => {
  console.log(url)
});
Copy the code

Label A is used to access the web

const btn = document.getElementById("btn");
btn.onclick = () = > {
  const link = document.createElement("a");
  link.href = "demoapp://hahah";
  link.click();
};
Copy the code

Try it out

We can put the information we need to pass after demoapp://. However, there is a limit to the length of the string that can be passed in this way, and this method is sufficient except for special requirements. The machine tested, two or three thousand length string is no problem

Using HTTP protocol communication

In the main process, start a service that uses HTTP to communicate

const http = require('http')

http.createServer((req, res) = > {
  console.log('method:', req.method)
  console.log('url:', req.url)
}).listen(8082)
Copy the code

The web side accesses the address of the service enabled by the main process to pass information

const img = document.createElement('img')
img.src = 'http://127.0.0.1:8082/aaa'
document.body.appendChild(img)
Copy the code

Console view effect

After receiving the request, the Node service in the main process can perform various operations according to the service, such as sending messages to the rendering process and rendering process page responding

Using WebSocket communication

This is similar to HTTP, except for two-way communication. The electron application sends information to the Web

Electron Main process code

const WebSocket = require('ws');

const wss = new WebSocket.Server({ port: 8082 });

wss.on('connection'.ws= > {
  ws.on('message'.message= > {
    console.log('received: %s', message);
  });

  ws.send('something');
});
Copy the code

The web client code

const socket = new WebSocket("ws://localhost:8082");

socket.onopen = () = > {
  socket.send("Hello! i am aaa");
};

socket.onmessage = (data) = > {
  console.log(data);
};
Copy the code

Communication using the system clipboard

The Web side writes to the clipboard, and the electron application listens for changes in the contents of the clipboard and responds (such as Thunderbolt, which automatically focuses on the window when you copy a link).

Electron main process code:

const clipboardWatcher = require("electron-clipboard-watcher");
// Listen to the clipboard
clipboardWatcher({
  watchDelay: 1000.onTextChange: text= > {
    console.log('Clipboard Changes', text)
    Do what you want to do
    win.focus && win.focus()
  }
});
Copy the code

Web side code:

import copy from 'copy-to-clipboard';
const btn = document.getElementById("btn");
btn.onclick = () = > {
  copy(Math.random());
};
Copy the code

View console print content:

Here, the contents of the clipboard are modified without the knowledge of the user, so we can do a processing: first read the original contents of the user clipboard, write them into the clipboard together with the business contents, wait for electron to process the business logic, and replace the contents in the clipboard with the original contents

conclusion

In a project, you can select a specific option based on actual requirements.