在构建基于 Eel 的 Web 应用时，经常会遇到需要在 Python 函数执行过程中更新前端界面的需求，例如显示图片。然而，如果 Python 函数执行时间过长，会导致前端界面阻塞，图片无法及时加载，直到 Python 函数执行完毕。为了解决这个问题，我们需要将耗时的 Python 函数异步执行，避免阻塞主线程。
异步加载图片的原理
问题的关键在于，Eel 的 eel.expose 装饰器将 Python 函数暴露给 JavaScript 调用，但默认情况下，JavaScript 对 Python 函数的调用是同步的。这意味着 JavaScript 代码会等待 Python 函数执行完毕才会继续执行。因此，当 generate() 函数调用 eel.set_image() 后，浏览器会等待 generate() 函数完全执行完毕，才会渲染 标签。
为了解决这个问题，我们需要将耗时的 Python 代码放入一个异步任务中执行。这样，generate() 函数可以立即返回，允许浏览器继续渲染页面，而异步任务会在后台执行，不会阻塞主线程。
使用 Celery 实现异步任务
Celery 是一个流行的 Python 异步任务队列。它可以将任务分发给多个 worker 执行，从而提高程序的并发能力和响应速度。
立即学习“Python免费学习笔记（深入）”；
1. 安装 Celery 和 Redis (或 RabbitMQ):
首先，需要安装 Celery 和一个消息代理，例如 Redis 或 RabbitMQ。Redis 通常更容易设置，因此我们这里使用 Redis 作为示例。
pip install celery redis
2. 创建 Celery 配置文件 (celeryconfig.py):
# celeryconfig.pybroker_url = 'redis://localhost:6379/0' # Redis 连接 URLresult_backend = 'redis://localhost:6379/0' # Redis 连接 URLtask_serializer = 'json'result_serializer = 'json'accept_content = ['json']timezone = 'Asia/Shanghai' # 设置时区，根据你的实际情况修改enable_utc = True
3. 修改 Python 代码:
import eelimport celeryfrom celery import Celery# 初始化 Celerycelery_app = Celery('my_app', broker='redis://localhost:6379/0', backend='redis://localhost:6379/0')celery_app.config_from_object('celeryconfig')@celery_app.taskdef long_running_task(source, keyword): # code that takes a long time to execute 2 # 模拟耗时操作 import time time.sleep(5) print(f"Task completed with source: {source}, keyword: {keyword}") return "Task completed"@eel.exposedef generate(source, keyword): eel.set_image() # 立即更新图片 long_running_task.delay(source, keyword) # 异步执行耗时任务 return "Image updated, task started in background"@eel.exposedef set_image(): # This function doesn't need to do anything in Python anymore, # as it's primarily handled by the Javascript code. print("set_image called from javascript")
4. 修改 JavaScript 代码:
eel.expose(set_image);function set_image() { document.getElementById("zoom-animate").innerHTML = '@@##@@';}function generate() { let source = document.getElementById("source").value; let keyword = document.getElementById("keyword").value; eel.generate(source, keyword).then(result => { console.log(result); // 输出 "Image updated, task started in background" });}
5. 启动 Celery worker:
在终端中运行以下命令来启动 Celery worker：
celery -A your_module worker -l info
将 your_module 替换为包含 Celery 应用的 Python 文件的名称。例如，如果你的 Python 文件名为 main.py，则命令为 celery -A main worker -l info。
解释:
celery_app = Celery(…): 初始化 Celery 应用，配置消息代理和结果存储。@celery_app.task: 将 long_running_task 函数注册为 Celery 任务。long_running_task.delay(source, keyword): 异步执行 long_running_task 函数，并将 source 和 keyword 作为参数传递给它。delay 方法会将任务添加到 Celery 队列中，由 worker 异步执行。eel.set_image() 在 long_running_task.delay 之前调用，这样可以确保在 Python 任务启动之前，图片就已经在前端更新。在 JavaScript 中，eel.generate(source, keyword) 返回一个 Promise，可以使用 .then() 方法来处理 Python 函数的返回值。
注意事项
确保 Redis 或 RabbitMQ 服务器已启动并正在运行。Celery worker 需要在与 Eel 应用相同的环境中运行。在 Celery 任务中，避免直接操作 Eel 对象，因为 Celery 任务是在独立的进程中运行的。如果需要在 Celery 任务中更新前端界面，可以使用 Eel 的 eel.spawn() 方法来执行 JavaScript 代码。
总结
通过使用 Celery 这样的异步任务队列，我们可以将耗时的 Python 代码放入后台执行，避免阻塞前端界面，从而提高 Web 应用的响应速度和用户体验。这种方法特别适用于需要在 Python 函数执行过程中更新前端界面的场景，例如显示进度条、加载图片等。
以上就是使用 Eel 和 Python 在 Web 前端异步加载图片的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1525687.html
微信扫一扫 
支付宝扫一扫 
