Electron as GUI of Python

Recent ready to do an offline upgrade tool, new to think of a few days ago Electron decided to use it in combination with python to complete

Began to prepare environmental structures

After a series of various zerorpc, zerormq various error

After more than a day online tossing finally found a successful practice

Look at the entire process to build:

start
 |
 V
+------------+
|            | start
|            +-------------> +-------------------+
|  electron  | sub process   |                   |
|            |               | python web server |
| (basically |     http      |                   |
|  browser)  | <-----------> | (business logic)  |
|            | communication |                   |
|            |               | (all html/css/js) |
|            |               |                   |
+------------+               +-------------------+

start
 |
 V
+--------------------+
|                    | start
|  electron          +-------------> +------------------+
|                    | sub process   |                  |
| (browser)          |               | python server    |
|                    |               |                  |
| (all html/css/js)  |               | (business logic) |
|                    |   zerorpc     |                  |
| (node.js runtime,  | <-----------> | (zeromq server)  |
|  zeromq client)    | communication |                  |
|                    |               |                  |
+--------------------+               +------------------+

Down mounting step (windows):

Remove-Item "$($env:USERPROFILE)\.node-gyp" -Force -Recurse -ErrorAction Ignore Remove-Item "$($env:USERPROFILE)\.electron-gyp" -Force -Recurse -ErrorAction Ignore Remove-Item .\node_modules -Force -Recurse -ErrorAction Ignore

npm install --runtime = electron --target = 1.7.6 ( version very important) 

Here's my direct colleagues remotely connected python environment, modify the following files:

//main.js
let mainWindow = null

const createWindow = () => {
  mainWindow = new BrowserWindow({width: 800, height: 600})
  mainWindow.loadURL(require('url').format({
    pathname: path.join(__dirname, 'index.html'),
    protocol: 'file:',
    slashes: true
  }))
  mainWindow.webContents.openDevTools()

  mainWindow.on('closed', () => {
    mainWindow = null
  })
}

app.on('ready', createWindow)

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

const zerorpc = require("zerorpc")
let client = new zerorpc.Client()

client.connect("tcp://192.168.200.51:4242")

client.invoke("echo", "server ready", (error, res) => {
  if(error || res !== 'server ready') {
    console.error(error)
  } else {
    console.log(res)
  }
})

let formula = document.querySelector('#formula')
let result = document.querySelector('#result')

formula.addEventListener('input', () => {
  client.invoke("calc", formula.value, (error, res) => {
    if(error) {
      console.error(error)
    } else {
		
      result.textContent nothing = 
})
  })
    }

formula.dispatchEvent(new Event('input'))

Down you can start: 
npm RUN Start 


reference address (quite good): https://github.com/fyears/electron-python-example

Electron as GUI of Python

Guess you like