在使用Eel框架构建Web应用时，经常会遇到这样的情况：Python后端执行耗时操作，导致前端界面更新被阻塞，尤其是在需要动态加载图片时，图片往往需要等待Python函数执行完毕后才能显示，严重影响用户体验。 本文将深入分析这个问题，并提供一种基于Celery的解决方案，实现图片的异步加载，从而有效解决该问题。
问题分析
Eel框架允许Python代码直接与前端JavaScript代码交互。 当一个Python函数被前端调用，并且该函数执行时间较长时，Web服务器会一直等待该函数返回结果，才会将响应发送给客户端。 在这个等待期间，前端界面会被阻塞，无法进行任何更新，包括加载图片。 这就是导致图片加载延迟的根本原因。
解决方案：使用Celery实现异步任务
Celery是一个流行的Python分布式任务队列。 它可以让你将耗时的任务放入队列中，由独立的worker进程异步执行，从而避免阻塞主线程。 在我们的场景中，可以将generate函数中耗时较长的部分，放入Celery任务中执行。
1. 安装Celery和Redis（作为消息代理）
pip install celery redis
2. 创建Celery任务
首先，需要创建一个Celery实例，并配置消息代理（Broker）和结果后端（Backend）。 Redis是一个常用的消息代理和结果后端，简单易用。
from celery import Celery
# Celery配置
celery_app = Celery('my_app',
broker='redis://localhost:6379/0', # 消息代理
backend='redis://localhost:6379/0') # 结果后端
# 定义Celery任务
@celery_app.task
def long_running_task(source, keyword):
# code that takes a long time to execute 2
# 模拟耗时操作
import time
time.sleep(5)
# 这里可以进行图片处理、数据分析等操作
print(f"Processing {source} and {keyword}...")
return "Task Completed"3. 修改Python代码
将generate函数修改为：
保君发免费网站系统使用说明：一、 本程序完全免费，并且，保证功能全部可以使用，且无后门及木马等，请放心使用。二、 如果发现问题，请及时联系我们，我们会义务尽力解决所反映的问题。或到本公司网站下载更新程序。三、 修改三个文件就能成为自己的网站：1、顶部图片LOGO.GIF，2、替换透明动画：LOGO.SWF，3、修改#sys123.asp中的内容为你想要的内容。
import eel
from your_celery_module import celery_app, long_running_task # 导入 Celery app 和任务
@eel.expose
def generate(source, keyword):
# code that takes a long time to execute 1
eel.set_image()
long_running_task.delay(source, keyword) # 异步执行耗时任务
return "Image set, task started" # 立即返回4. 启动Celery Worker
在终端中运行以下命令启动Celery worker：
celery -A your_celery_module worker -l info
将your_celery_module替换为包含Celery配置和任务定义的Python文件名。
5. 前端代码
前端代码无需修改，保持不变：
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);
}代码解释
- long_running_task.delay(source, keyword): delay函数是Celery提供的，用于异步执行任务。 它会将任务放入消息队列中，等待worker进程来执行。
- eel.set_image(): 该函数会在long_running_task任务开始前被调用，立即更新前端图片。
- return "Image set, task started": generate函数立即返回，不会阻塞Web服务器，从而允许前端界面立即更新。
运行流程
- 用户在前端触发generate函数。
- Python后端执行generate函数。
- generate函数调用eel.set_image()，前端显示图片。
- generate函数使用long_running_task.delay()将耗时任务放入Celery队列。
- generate函数立即返回。
- Celery worker从队列中取出任务并异步执行。
注意事项
- 确保Redis服务器已经启动。
- 将your_celery_module替换为实际的Python文件名。
- 在long_running_task函数中处理可能出现的异常。
- 可以根据实际情况调整Celery的配置，例如并发数、队列名称等。
- 如果需要获取Celery任务的执行结果，可以使用Celery提供的AsyncResult对象。
总结
通过使用Celery，我们可以将Eel应用中耗时的Python任务异步执行，避免阻塞前端界面，从而实现图片的异步加载，提升用户体验。 这种方法适用于各种需要执行长时间操作的Eel应用，例如数据处理、图像处理、机器学习等。 Celery的强大功能和灵活性，使其成为构建高性能Eel应用的理想选择。
