ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

eel --- A little Python library for making simple Electron-like HTML/JS GUI apps

2022-07-29 01:04:49  阅读:251  来源: 互联网

标签:little like Python random eel error print 客户端 服务器端


eel

https://github.com/ChrisKnott/Eel#intro

electron是一种实现GUI单体应用的框架, GUI部分使用web前端技术, 后台运行在nodejs上。

虽然在同一个机器上,实际上实现了前后台分离。

 

nodejs属于web领域发展形成的后端平台,

对于python生态积累的优势无法应用到,例如很多只有在python上才有的强大的库, 例如 pandas numpy.

 

无法否认, GUI领域python原生也有一些框架, 但是都没有web前端的能力强大。

 

所以如何将 python后端的优势 和 web前端的优势集成起来,这是个问题。

eel 就是为了解决此问题诞生的, 后端采用 python作为后台, 前端仍然使用 web前端的一套技术。

 

Eel is a little Python library for making simple Electron-like offline HTML/JS GUI apps, with full access to Python capabilities and libraries.

Eel hosts a local webserver, then lets you annotate functions in Python so that they can be called from Javascript, and vice versa.

Eel is designed to take the hassle out of writing short and simple GUI applications. If you are familiar with Python and web development, probably just jump to this example which picks random file names out of the given folder (something that is impossible from a browser).

 

For some reason many of the best-in-class number crunching and maths libraries are in Python (Tensorflow, Numpy, Scipy etc) but many of the best visualization libraries are in Javascript (D3, THREE.js etc). Hopefully Eel makes it easy to combine these into simple utility apps for assisting your development.

 

优点

  • 前后端RPC互相调用
  • 后端多任务并发执行

 

底层架构

之所以前后端能够以类似RPC方式相互调用, 底层实现是依赖 websocket 通讯层,

在此通讯层上, 实现RPC相关的监听处理逻辑:

客户端 -------> 服务器端

  • 客户端 发送 call 消息 到服务器端
  • 服务器端接收到客户端发送来的 call 消息
  • 服务器端 处理call 消息, 并返回return消息
  • 客户端接收到服务器端返回的 return 消息
  • 客户端处理return消息,触发回调函数

 

服务端 -------> 客户端

  • 服务器端 发送 call 消息 给客户端
  • 客户端收到服务器端发送过来的 call 消息
  • 客户端处理call消息
  • 客户端发送return消息给服务器端
  • 服务器端接收到客户端返回的 return 消息
  • 服务器端处理return消息,触发回调。

 

react + python

https://github.com/ChrisKnott/Eel/tree/master/examples/07%20-%20CreateReactApp

 

callbacks demo

https://github.com/ChrisKnott/Eel/tree/master/examples/02%20-%20callbacks

 

后端

import eel
import random

eel.init('web')

@eel.expose
def py_random():
    return random.random()

@eel.expose
def py_exception(error):
    if error:
        raise ValueError("Test")
    else:
        return "No Error"

def print_num(n):
    print('Got this from Javascript:', n)


def print_num_failed(error, stack):
    print("This is an example of what javascript errors would look like:")
    print("\tError: ", error)
    print("\tStack: ", stack)

# Call Javascript function, and pass explicit callback function    
eel.js_random()(print_num)

# Do the same with an inline callback
eel.js_random()(lambda n: print('Got this from Javascript:', n))

# Show error handling
eel.js_with_error()(print_num, print_num_failed)


eel.start('callbacks.html', size=(400, 300))

 

前端

<!DOCTYPE html>
<html>
    <head>
        <title>Callbacks Demo</title>
        
        <script type="text/javascript" src="/eel.js"></script>
        <script type="text/javascript">
        
        eel.expose(js_random);
        function js_random() {
            return Math.random();
        }

        eel.expose(js_with_error);
        function js_with_error() {
            var test = 0;
            test.something("does not exist");
        }
        
        function print_num(n) {
            console.log('Got this from Python: ' + n);
        }
        
        // Call Python function, and pass explicit callback function
        eel.py_random()(print_num);
        
        // Do the same with an inline callback
        eel.py_random()(n => console.log('Got this from Python: ' + n));

        // show usage with promises
        // show no error
        eel.py_exception(false)().then((result) => {
                // this will execute since we said no error
                console.log("No Error")
            }).catch((result) => {
                console.log("This won't be seen if no error")
            }
        );
        // show if an error occurrs
        eel.py_exception(true)().then((result) => {
                // this will not execute
                console.log("No Error")
            }).catch((result) => {
                console.log("This is the repr(e) for an exception " + result.errorText);
                console.log("This is the full traceback:\n" + result.errorTraceback);
            }
        )
        </script>
    </head>
    
    <body>
        Callbacks demo
    </body>
</html>

 

标签:little,like,Python,random,eel,error,print,客户端,服务器端
来源: https://www.cnblogs.com/lightsong/p/16530822.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有