使用 Eel 实现 Python 与前端交互时图片加载延迟的解决方案

在使用 Eel 框架进行 Python 与前端交互时，经常会遇到需要在 Python 函数执行过程中更新前端页面的情况，例如动态加载图片。然而，如果 Python 函数执行时间过长，可能会阻塞前端页面的渲染，导致图片无法及时显示，直到 Python 函数执行完毕。这严重影响了用户体验。本文将介绍一种使用 Celery 异步任务队列解决此问题的方案。

问题分析

当 Python 函数通过 eel.expose 暴露给前端 JavaScript 调用时，实际上是在 WSGI 服务器上执行的。如果该函数执行时间过长，WSGI 服务器会一直等待该函数返回，才能将响应发送给前端。因此，前端页面会一直处于等待状态，无法及时渲染和加载图片。

解决方案：使用 Celery 异步任务队列

立即学习“Python免费学习笔记（深入）”；

Celery 是一个强大的分布式任务队列，可以用于异步执行耗时任务。通过将耗时任务放入 Celery 任务队列中执行，可以避免阻塞主线程，从而确保前端页面能够及时响应。

具体步骤

1. 安装 Celery 和 Redis

   Celery 需要一个消息中间件来传递任务，这里我们选择 Redis。

   pip install celery redis

   登录后复制

2. 创建 Celery 任务

   创建一个 celery.py 文件，配置 Celery 实例：

   

   ViiTor实时翻译

   AI实时多语言翻译专家！强大的语音识别、AR翻译功能。

   116

   查看详情

   from celery import Celery
   
   celery_app = Celery('my_app',
                       broker='redis://localhost:6379/0',  # Redis 作为消息中间件
                       backend='redis://localhost:6379/0') # Redis 作为结果存储
   
   celery_app.conf.update(
       task_serializer='pickle',
       result_serializer='pickle',
       accept_content=['pickle', 'json'],
       result_expires=3600,
   )
   
   @celery_app.task
   def long_running_task(source, keyword):
       # code that takes a long time to execute 2
       # 在这里执行耗时操作，例如图像处理、数据分析等
       # 可以将结果保存到文件或数据库中
       import time
       time.sleep(5) # 模拟耗时操作
       return f"Processed {source} with {keyword}"

   登录后复制

3. 修改 Python 代码

   将 generate 函数修改为调用 Celery 任务：

   import eel
   from celery import Celery
   
   celery_app = Celery('my_app',
                       broker='redis://localhost:6379/0',  # Redis 作为消息中间件
                       backend='redis://localhost:6379/0') # Redis 作为结果存储
   
   celery_app.conf.update(
       task_serializer='pickle',
       result_serializer='pickle',
       accept_content=['pickle', 'json'],
       result_expires=3600,
   )
   
   @celery_app.task
   def long_running_task(source, keyword):
       # code that takes a long time to execute 2
       # 在这里执行耗时操作，例如图像处理、数据分析等
       # 可以将结果保存到文件或数据库中
       import time
       time.sleep(5) # 模拟耗时操作
       return f"Processed {source} with {keyword}"
   
   @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 # 立即返回

   登录后复制

4. 启动 Celery worker

   在终端中启动 Celery worker：

   celery -A celery_app worker -l info

   登录后复制

5. 修改前端代码

   前端代码保持不变，只需要确保 set_image() 函数能够及时被调用。

   eel.expose(set_image);
   
   function set_image() {
       document.getElementById("zoom-animate").innerHTML = '<img src="temp.png">';
   }
   
   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 任务，并将 source 和 keyword 作为参数传递给任务函数。
• eel.set_image(): 该函数用于通知前端加载图片，应该在调用 long_running_task.delay() 之前执行，以确保图片能够及时显示。
• return: generate 函数在调用 long_running_task.delay() 后立即返回，避免阻塞主线程。

注意事项

• 确保 Redis 服务器已启动。
• Celery worker 需要在后台运行，以便能够处理异步任务。
• 如果需要在前端获取 Celery 任务的结果，可以使用 Celery 的 result 对象。
• 对于更复杂的任务，可以使用 Celery 的任务链和工作流。
• 确保 celery_app 的配置正确，特别是 broker 和 backend 的地址。

总结

通过使用 Celery 异步任务队列，我们可以有效地解决在使用 Eel 框架进行 Python 与前端交互时，由于长时间运行的 Python 函数阻塞了前端页面的渲染，导致图片无法及时加载的问题。该方案不仅可以提高用户体验，还可以提高应用程序的性能和可扩展性。 通过将耗时任务异步化，可以使前端页面更加流畅，响应更加迅速。

以上就是使用 Eel 实现 Python 与前端交互时图片加载延迟的解决方案的详细内容，更多请关注php中文网其它相关文章！