Electron发送数据到后端（15）Electron应用程序有前端进程（称为“renderer”）和后端进程（称为“m

Electron应用程序有前端进程（称为“renderer”）和后端进程（称为“main”）。在这两者之间还有一些桥接代码（“preload”），可以访问后端API。

到目前为止，我们完全忽略了后端进程，在前端和预加载中完成了所有工作。

让我们看看后端和前端如何通信。

启动新应用程序

让我们做点什么。创建一个新的项目：

$ npm init -y
$ npm install --save-dev electron

`index.html`

让我们从一个简单的index.html开始。

<!DOCTYPE html>
<html>
  <body>
    <style>
      body {
        background-color: #444;
        color: #ccc;
        font-family: monospace;
        font-size: 24px;
      }
      form {
        display: flex;
      }
      input {
        background-color: inherit;
        color: inherit;
        font-family: inherit;
        border: none;
        font-size: inherit;
        flex: 1;
      }
    </style>
    <h1>Print to terminal</h1>
    <form>
      <input type="text" autofocus />
    </form>
    <div id="responses"></div>
    <script src="app.js"></script>
  </body>
</html>

后端代码`index.js`

我们可以像以前一样。稍后我们将在这个文件中添加一个额外的东西。现在，让我们打开index.html并赋予它完全的权限：

let { app, BrowserWindow } = require("electron")

function createWindow() {
  let win = new BrowserWindow({
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
    }
  })
  win.loadFile("index.html")
}

app.on("ready", createWindow)

app.on("window-all-closed", () => {
  app.quit()
})

前端代码`app.js`

在前端，我们需要一个事件处理程序。我们获取提交的数据，将其发送到后端，获取其响应，并将其附加到#responses。

let form = document.querySelector("form")
let input = document.querySelector("input")
let responses = document.querySelector("#responses")

form.addEventListener("submit", async (e) => {
  e.preventDefault()
  let line = input.value
  input.value = ""
  let responseText = // what do we do here?
  let response = document.createElement("div")
  response.textContent = responseText
  responses.appendChild(response)
})

我们如何将数据发送到后端？具体操作如下：

let { ipcRenderer } = require("electron")

let form = document.querySelector("form")
let input = document.querySelector("input")
let responses = document.querySelector("#responses")

form.addEventListener("submit", async (e) => {
  e.preventDefault()
  let line = input.value
  input.value = ""
  let responseText = await ipcRenderer.invoke("console", line)
  let response = document.createElement("div")
  response.textContent = responseText
  responses.appendChild(response)
})

IPC是“进程间通信”，或者说是不同进程之间进行通信的一种方式。

后端处理程序

let { ipcMain } = require("electron")

ipcMain.handle("console", (event, line) => {
  console.log(`Received from frontend: ${line}`)
  return `Backend confirms it received: ${line}`
})