网页与Electron通信的

背景

网站上有个功能：添加任务到基于 electron 实现的 桌面app上。实践过程中，尝试使用并总结了以下几种方案。有不对的地方或更好的方案的欢迎指出来或进行补充。

通过协议通信

利用自定义协议通信

主进程中注册自定义协议 demoapp

// 注册协议
protocol.registerSchemesAsPrivileged([
  { scheme: 'demoapp', privileges: { secure: true, standard: true } }
])

// 监听
app.on("open-url", async (event, url) => {
  console.log(url)
});

web端通过 a 标签访问

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

尝试下效果

我们可以将需要传递的信息放在 demoapp:// 后面。但是这个方式传递的字符串长度是有限制的，如果不是需求比较特殊，这个方法也够用了。本机测了下，两三千长度的字符串是没什么问题的

利用 http 协议通信

在主进程中，起一个服务，利用 http 来通信

const http = require('http')

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

web端访问主进程启用的服务的地址来传递信息

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

控制台查看效果

主进程中node服务接收到请求后，可以根据业务进行各种操作，比如给渲染进程发送消息，渲染进程页面做出响应等

利用 websocket 通信

这个和 http 差不多，只是可以双向通信，electron 应用可以向 web 端发送信息

electron 主进程代码

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');
});

web端代码

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

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

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

利用系统剪贴板通信

web 端向剪贴板中写入内容，electron 应用监听剪贴板内容的变化，做出响应(例如迅雷，当你复制链接的时候，迅雷会自动聚焦窗口)。

electron 主进程代码:

const clipboardWatcher = require("electron-clipboard-watcher");
// 监听剪贴板内容
clipboardWatcher({
  watchDelay: 1000,
  onTextChange: text => {
    console.log('剪贴板变化', text)
    // 做你想做的事情
    win.focus && win.focus()
  }
});

web 端代码：

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

查看控制台打印内容:

这里在用户不知情的情况下修改了剪贴板内容，所以可以做个处理：先读取用户剪贴板原有内容，和业务内容一起写入到剪贴板中，等待 electron 处理业务逻辑后，将剪贴板中的内容替换成原有的内容

总结

	优点	缺点
自定义协议	简单方便	协议后跟的字符串过长时存在字符串丢失的可能
http	信息不会丢失	启动服务时存在端口被占用的风险
websocket	1.信息不会丢失 2.可以双向通信	启动服务时存在端口被占用的风险
剪贴板通信	信息不会丢失	在用户不知情的情况下修改了剪贴板内容

项目中可以根据实际需求进行选择。