连接Python 3和Electron/Node.JS：构建现代桌面应用程序


目录

先决条件

第1步——设置开发环境

安装Node.js和NPM

设置Python虚拟环境

创建虚拟环境

第4步——创建Node.js应用程序

如何在Electron和Python之间进行通讯

什么是IPC？

使用child_process生成Python进程

使用python-shell

使用客户端-服务器通信

概括

先决条件

本教程专为希望使用现代Web技术、HTML、CSS和JS及相关框架构建桌面应用程序和GUI的Python开发人员而设计。

为了能够轻松地学习本教程，您需要具备一些先决条件：

  • 必须具备Python知识。
  • 您应该习惯使用JavaScript，HTML和CSS等网络技术。
  • 您还应该熟悉npm中的Node.js软件包的安装和使用。

第1步——设置开发环境

在本节中，我们将建立一个运行示例的开发环境。我们需要在计算机上安装Node.js以及NPM和Python 3。

安装Node.js和NPM

您可以遵循多种方法在开发机器上安装Node.js和NPM，例如使用：

  • 目标操作系统的官方二进制文件
  • 您系统的官方软件包管理器
  • NVM（节点版本管理器），用于在同一台计算机上安装和管理Node.js的多个版本

让我们保持简单，只需访问官方网站并下载目标操作系统的二进制文件，然后按照说明在系统上安装Node.js和NPM。

设置Python虚拟环境

您很有可能已经在开发计算机上安装了Python 3。如果未安装，最简单的方法是访问官方网站并获取目标系统的二进制文件。

您可以通过打开命令行界面并运行以下命令来确保在系统上安装了Python 3：

1
2
$ python --version
Python 3.7.0

现在，让我们建立一个虚拟环境。

创建虚拟环境

在本节中，您将用venv创建隔离的虚拟环境以运行示例并安装所需的软件包。

虚拟环境允许您创建一个环境来隔离当前项目的依赖关系。这将使您避免具有不同版本的相同软件包之间的冲突。

在Python 3中，您可以利用venv模块创建虚拟环境。

现在，转到您的终端并运行以下命令来创建虚拟环境：

1
$ python -m venv env

接下来，您需要使用以下命令激活环境：

1
$ source env/bin/activate

在Windows上，您可以使用Scripts\activate.bat文件激活虚拟环境，如下所示：

1
$ env\Scripts\activate.bat

就是这样。现在，您已经激活了虚拟环境，并且可以为示例安装软件包。

第4步——创建Node.js应用程序

现在，我们已经通过将Node.js与npm一起安装并创建Python虚拟环境，来设置了用于Python和Electron开发的开发环境，让我们继续创建Electron应用程序。

首先，为项目创建一个文件夹，并使用以下命令在其中创建package.json文件：

1
2
3
$ mkdir python-nodejs-example
$ cd python-nodejs-example
$ npm init -y

Npm的init命令会产生一个具有以下默认值的package.json文件：

1
2
3
4
5
6
7
8
9
10
11
12
{
  "name": "python-nodejs-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

您可以自定义这个文件中您认为适合您的项目的值，您也可以简单地使用这个简单示例的默认值。

接下来，我们需要在项目的文件夹中创建两个文件index.html和index.js：

1
2
$ touch index.js
$ touch index.html

如何在Electron和Python之间进行通讯

在本节中，我们将看到可用于实现Electron和Python进程之间的通信的各种可用方法。

什么是IPC？

根据维基百科：

在计算机科学中，进程间通信（IPC）特指操作系统提供的机制，允许进程管理共享数据。通常，应用程序可以使用IPC，分类为客户机和服务器，其中客户机请求数据，服务器响应客户机请求。

IPC是指操作系统支持的一组机制，以使不同的本地或远程进程能够相互通信。例如，在我们的例子中，我们希望允许在Electron进程和Python进程之间进行通信。

让我们看一些实现IPC的方法。

使用child_process生成Python进程

Node.js提供了{ child_process]（https://nodejs.org/api/child_process.html）模块，该模块允许您生成子进程。

让我们用它来生成一个Python进程并运行一个简单的calc.py脚本。

我们将使用simplecalculator在Python中进行简单的计算，因此我们首先运行以下命令进行安装：

1
$ sudo pip install simplecalculator

首先，在项目的文件夹中，创建一个py文件夹，并在其中创建一个calc.py文件：

1
2
$ mkdir py & cd py
$ touch calc.py

打开calc.py文件，并添加以下Python代码，该代码执行计算并将结果打印到标准输出中：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
from sys import argv
from calculator.simple import SimpleCalculator

def calc(text):
    """based on the input text, return the operation result"""
    try:
        c = SimpleCalculator()
        c.run(text)
        return c.log[-1]
    except Exception as e:
        print(e)
        return 0.0

if __name__ == '__main__':
    print(calc(argv[1]))

接下来，创建一个renderer.js文件，并添加以下代码以生成Python进程并执行py/calc.py脚本：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function sendToPython() {
  var python = require('child_process').spawn('python', ['./py/calc.py', input.value]);
  python.stdout.on('data', function (data) {
    console.log("Python response: ", data.toString('utf8'));
    result.textContent = data.toString('utf8');
  });

  python.stderr.on('data', (data) => {
    console.error(`stderr: ${data}`);
  });

  python.on('close', (code) => {
    console.log(`child process exited with code ${code}`);
  });
}

btn.addEventListener('click', () => {
  sendToPython();
});

btn.dispatchEvent(new Event('click'));

接下来，打开index.html文件并按如下所示进行更新：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Calling Python from Electron!</title>
</head>

<body>
    <h1>Simple Python Calculator!</h1>
    <p>Input something like <code>1 + 1</code>.</p>
    <input id="input" value="1 + 1"></input>
    <input id="btn" type="button" value="Send to Python!"></input>
    </br>
    Got <span id="result"></span>
   
    <script src="./renderer.js"></script>

</body>
</html>

使用python-shell

在了解了如何使用child_process在Electron和Python之间进行通信之后，现在让我们看看如何使用python-shell。

python-shell 是一个npm软件包，它提供了一种从Node.js运行Python脚本的简便方法，并具有基本且有效的进程间通信和错误处理。

您可以将python-shell用于：

  • 生成Python脚本
  • 在文本、JSON和二进制模式之间切换
  • 通过stdin和stdout流进行数据传输
  • 在发生错误的情况下获取堆栈跟踪

转到终端，然后运行以下命令从npm 安装python-shell：

1
$ npm install --save python-shell

在撰写本文时，python-shell v1.0.8已安装在我们的项目中。

接下来，打开renderer.js文件并按如下所示更新sendToPython()函数：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function sendToPython() {
  var { PythonShell } = require('python-shell');

  let options = {
    mode: 'text',
    args: [input.value]
  };

  PythonShell.run('./py/calc.py', options, function (err, results) {
    if (err) throw err;
    // results is an array consisting of messages collected during execution
    console.log('results: ', results);
    result.textContent = results[0];
  });
}

使用客户端-服务器通信

现在让我们看看使用HTTP服务器在Python和Electron之间实现通信的另一种方法。

回到终端并运行以下命令来安装Flask和Flask-Cors：

1
2
$ pip install flask
$ pip install Flask-Cors

接下来，在您项目的py文件夹中，创建一个server.py文件，并添加以下代码以运行Flask服务器，该服务器仅执行计算并将结果作为HTTP响应返回：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import sys
from flask import Flask
from flask_cors import cross_origin
from calculator.simple import SimpleCalculator

def calcOp(text):
    """based on the input text, return the operation result"""
    try:
        c = SimpleCalculator()
        c.run(text)
        return c.log[-1]
    except Exception as e:
        print(e)
        return 0.0

app = Flask(__name__)

@app.route("/<input>")
@cross_origin()
def calc(input):    
    return calcOp(input)

if __name__ == "__main__":
    app.run(host='127.0.0.1', port=5001)

接下来，打开renderer.js文件，并添加以下代码以生成Python并运行server.py文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
let input = document.querySelector('#input')
let result = document.querySelector('#result')
let btn = document.querySelector('#btn')

function sendToPython() {
  var { PythonShell } = require('python-shell');

  let options = {
    mode: 'text'
  };
 
  PythonShell.run('./py/server.py', options, function (err, results) {
    if (err) throw err;
    // results is an array consisting of messages collected during execution
    console.log('response: ', results);
  });
}

function onclick(){

  fetch(`http://127.0.0.1:5001/${input.value}`).then((data)=>{      
      return data.text();
     
  }).then((text)=>{
    console.log("data: ", text);
    result.textContent = text;
  }).catch(e=>{
    console.log(e);
  })
}
sendToPython();

btn.addEventListener('click', () => {
  onclick();
});

btn.dispatchEvent(new Event('click'))

概括

在本教程中，我们已经为Python开发人员介绍了electronic，如果他们想使用基于HTML、CSS和JavaScript的现代网络技术为自己的Python应用程序构建GUI，那么这将是一个很好的工具。我们还看到了连接Python和electronic的不同方法，例如child_process，python-shell和HTTP（Flask）服务器。