Electron 框架中调用 Python 构建桌面应用

Python013

Electron 框架中调用 Python 构建桌面应用,第1张

不同的语言、框架都有自己擅长的领域：Electron 基于 Chromium 和 Node.js 能以 Web 开发的模式打造桌面应用，开发用户界面又快捷又简单；Python 则在数据分析、自动化脚本等领域有非常多的应用。两者的社区生态都十分强大，由两者共同构建应用，在界面开发、功能、性能上能够强强联合；

为了简单验证技术可行性，我们来编写一个 Demo：

目的：验证 Electron 打造的桌面应用能够调用 Python，思路是使用 RPC 或 HTTP 或 WebSocket 进行通信

Demo 功能：输入 x、y 坐标，程序会移动鼠标到屏幕的 x,y 位置（通过 python 库 pyautogui 实现）

Demo 运行环境：MacOS、pyInstaller: 版本 4.5.1、python: 版本 3.9.7

源码：-------- 项目源码 --------

注意：移动鼠标需要授予应用控制权限，在 MacOS 下设置 偏好设置 ->隐私 ->辅助功能 ->允许对应的应用。

技术栈：NodeJS、Electron、Python、aiohttp（HTTP、WebSocket）、pyautogui（控制鼠标）

为了使 NodeJS 和 Python 能够通信，Python 需要启动一个本地通信服务，Demo 中 py/api.py 能够启动一个本地 HTTP 服务：

然后我们需要执行 Python 代码以启动服务，为了使 NodeJS 可以执行 Python，我们使用 pyinstaller 将 Python 打包成可执行文件：

Python 启动了本地 HTTP 服务后，Chromium 和 Node.js 就可以通过请求的方式，与 python 连接通信了：

简单来说三个步骤：

本项目只是一个验证思路的 Demo，真的需要在项目上实践，还需要考虑以下几个点：

应该使用 RPC 通信而不是 HTTP 或者 WebSocket，Demo 使用 HTTP 只是搭建方便。实践中在建立连接、保持连接、异常重连都需要编写更多的逻辑来处理。为什么 Demo 没有使用 zerorpc? 这个库已经 4 年没有维护了，不兼容新版 NodeJS。

项目通过 pyinstaller 打包成可执行文件来调用 python。实际上其他能编译为可执行文件的语言也一样。还可以使用 WebAssembly 将其他语言编译成 .wasm，在 NodeJS 中引入执行。

通过编译Cube 2/Sauerbraten来记录下wasm的一些心得

建议1：最好还是linux or Mac OS X 环境 

笔者环境为ubuntu，win10环境下也可以通过安装子系统来进行。

1 先更新sudo apt-get update

2 安装gcc依赖 sudo apt-get install build-essential

3 安装cmake sudo apt-get install cmake

4 安装python （2.7版本）sudo apt-get install python2.7

5 安装nodejs sudo apt-get install nodejs

6 安装java sudo apt-get install default-jre

7 创建一个文件夹用来存放所需文件 mkdir wasm

8 克隆包到文件夹 

    cd wasm 

    git clone https://github.com/juj/emsdk.git

    git clone https://github.com/kripken/BananaBread.git

    cd emsdk

1 ./emsdk update

2 ./emsdk install latest 这个过程会比较漫长，需要一个较好的网络环境和一杯咖啡

3 ./emsdk activate latest

4 注册到环境变量 source ./emsdk_env.sh

5 接下来通过一个官方demo来简单测试下是否成功安装各组件

建立一个新的c文件-hello.c

执行 emcc hello.c -s WASM=1 -o hello.html

6 建立一个服务器来启动

1 node 方式 emrun --no_browser --port 8080 .

2 python 方式 python -m SimpleHTTPServer 8080 in folder(你刚才用来放hello.c的文件夹)

3 win情况下用iis创建，但是有需要注意的地方，需要手动注册mime类型data，wasm为application/octet-stream。

7 打开浏览器输入localhost:8080/hello.html, 如果成功会看到hello world

1 cd BananaBread/cube2/src/web

2 win用户请检查是否安装过minGW，可能会造成影响

3 make 

4 启动服务器，enjoy game！