使用 Eel 和 Python 实现前端图片实时更新的教程-js教程-PHP中文网

使用 Eel 和 Python 实现前端图片实时更新的教程

碧海醫心

发布： 2025-10-02 18:38:27

原创

822人浏览过

使用 eel 和 python 实现前端图片实时更新的教程

在使用 Eel 框架构建 Web 应用时，有时会遇到这样的问题：Python 后端执行耗时操作时，前端页面会卡住，直到后端操作完成才能响应。这会导致前端图片无法及时更新，影响用户体验。本文将介绍一种解决方案：使用 Celery 异步任务队列，将耗时操作放入后台执行，从而确保前端能够及时响应并更新图片。

问题分析

问题的根源在于 Eel 的运行机制。当 Python 后端执行耗时操作时，Web 服务器会一直等待 Python 函数返回，才能将响应发送给前端。这意味着，在 Python 函数执行完毕之前，前端无法接收到任何更新。

例如，以下代码：

JavaScript (前端)

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

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);
}

登录后复制

Python (后端)

import eel

@eel.expose
def generate(source, keyword):
    # 耗时操作 1
    eel.set_image()
    # 耗时操作 2

登录后复制

在这个例子中，generate 函数包含了两个耗时操作。即使在 eel.set_image() 被调用之后，前端也无法立即更新图片，因为 Web 服务器还在等待 generate 函数执行完毕。

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

Celery 是一个强大的分布式任务队列，可以用于异步执行耗时操作。通过将耗时操作放入 Celery 任务队列，Python 后端可以立即返回，从而避免阻塞前端。

以下是使用 Celery 的步骤：

ViiTor实时翻译

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

116

查看详情

安装 Celery 和 Redis (或 RabbitMQ)

Celery 需要一个消息代理来传递任务。Redis 和 RabbitMQ 是常用的选择。这里以 Redis 为例：
```
pip install celery redis
```
登录后复制

创建 Celery 配置文件 celeryconfig.py

broker_url = 'redis://localhost:6379/0'  # Redis 连接 URL
result_backend = 'redis://localhost:6379/0'  # 结果存储 URL
task_serializer = 'json'
result_serializer = 'json'
accept_content = ['json']
timezone = 'Asia/Shanghai'
enable_utc = True

登录后复制

创建 Celery 任务模块 tasks.py

from celery import Celery
import eel

app = Celery('my_tasks', include=['tasks'])
app.config_from_object('celeryconfig')

@app.task
def long_running_task(source, keyword):
    # 耗时操作 2
    # 在这里进行你的耗时计算，例如图像处理
    # 假设这里生成了 temp.png
    print(f"Processing source: {source}, keyword: {keyword}")
    return "Task completed"

登录后复制

修改 Python 后端代码

import eel
from tasks import long_running_task

@eel.expose
def generate(source, keyword):
    eel.set_image()  # 立即通知前端更新图片
    long_running_task.delay(source, keyword)  # 将耗时操作放入 Celery 任务队列
    return "Task submitted"

登录后复制

启动 Celery Worker

在终端中运行以下命令：
```
celery -A tasks worker -l info
```
登录后复制

代码解释

long_running_task.delay(source, keyword): delay 方法将 long_running_task 函数放入 Celery 任务队列，并立即返回。
eel.set_image(): 在 generate 函数中，先调用 eel.set_image()，然后将耗时操作放入 Celery 任务队列。这样，前端可以立即更新图片，而耗时操作在后台异步执行。
celery -A tasks worker -l info: 启动 Celery worker，监听任务队列，并执行任务。 -A tasks 指定 Celery 应用的位置。 -l info 设置日志级别为 info。

注意事项

确保 Redis (或 RabbitMQ) 服务已经启动。
Celery worker 需要能够访问 Python 后端代码。
Celery 配置文件 celeryconfig.py 需要正确配置 Redis (或 RabbitMQ) 连接信息。
在生产环境中，建议使用更健壮的消息代理和更复杂的 Celery 配置。
如果需要在 Celery 任务中更新前端，可以使用 eel.spawn 来确保在正确的线程中执行 Eel 函数。

总结

通过使用 Celery 异步任务队列，我们可以将耗时操作放入后台执行，从而避免阻塞前端，确保前端能够及时响应并更新图片。这可以显著提升 Web 应用的用户体验。本文提供了一个简单的示例，展示了如何在 Eel 应用中集成 Celery。在实际应用中，需要根据具体情况进行调整和优化。

以上就是使用 Eel 和 Python 实现前端图片实时更新的教程的详细内容，更多请关注php中文网其它相关文章！