如何保持服务器推送事件连接活跃？

Question

我有一个后端（Quart）API，它作为事件源，正在处理一个耗时的操作。这个耗时的任务大约需要2分钟才能生成一些响应。

为了保持连接活跃，我每10秒发送一次心跳信号。我可以看到这些都在正常工作，我的React前端也正确接收到了事件。

但是，问题是每过1分钟，API请求就会被取消，然后又会创建一个新的请求到同一个接口。

我想要的是，在耗时的任务完成之前（大约2分钟），一直向客户端发送心跳信号。

这是我在Python（Quart）中的后端逻辑：

import asyncio
from quart import Quart, Response, websocket

app = Quart(__name__)

@app.after_request
async def add_cors_headers(response):
    response.headers['Access-Control-Allow-Origin'] = 'http://localhost:3000'
    response.headers['Access-Control-Allow-Methods'] = 'GET, POST, PUT, DELETE'
    response.headers['Access-Control-Allow-Headers'] = 'Content-Type'
    return response

async def time_consuming_task(queue):
    # Simulate a time-consuming task
    await asyncio.sleep(120)
    # Once the task is completed, put the result in the queue
    await queue.put("Task completed")

async def in_progress_events(queue):
    i = 0
    while True:
        yield f"data: {i}\n\n"
        i += 1
        await asyncio.sleep(1)

@app.route('/sse')
async def sse():
    # Create a queue to communicate with the time-consuming task
    queue = asyncio.Queue()

    # Start the time-consuming task
    asyncio.create_task(time_consuming_task(queue))

    async def event_stream():
        while True:
            async for event in in_progress_events(queue):
                yield event

                # Check if there's a result in the queue
                if not queue.empty():
                    result = await queue.get()
                    yield f"data: {result}\n\n"
                    yield "event: close\ndata: Connection closed\n\n"
                    return

            # Send a heartbeat event to keep the connection alive
            yield "event: heartbeat\ndata: \n\n"
            await asyncio.sleep(50)  # Send a heartbeat every 50 seconds

    response = Response(event_stream(), content_type='text/event-stream')
    response.headers['Connection'] = 'keep-alive'
    response.headers['Cache-Control'] = 'no-cache'
    response.headers['Transfer-Encoding'] = 'chunked'
    return response

if __name__ == '__main__':
    app.run()

还有前端的逻辑：

import React, { useEffect, useState } from 'react';

function SSEComponent() {
  const [data, setData] = useState('');

  useEffect(() => {
    const eventSource = new EventSource('http://localhost:5000/sse');

    eventSource.onmessage = (event) => {
        console.log("onmessage", event.data);
      setData(event.data);
    };

    eventSource.addEventListener('close', () => {
        console.log("onclose");
      eventSource.close();
    });

    eventSource.addEventListener('heartbeat', () => {
        // Handle heartbeat events
        console.log('Received heartbeat event');
      });

    eventSource.onerror = (error) => {
        console.log("error", error);
    };

    return () => {
      eventSource.close();
    };
  }, []);

  return (
    <div>
      <h2>Server-Sent Events Data:</h2>
      <p>{data}</p>
    </div>
  );
}

export default SSEComponent;

控制台日志显示多个相同的API调用