如何保持服务器发送的事件连接？

Question

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

为了保持连接处于活动状态，我每 10 秒发送一次心跳。我可以看到所有这些事情都在工作，并且我的反应前端正确接收了事件。

但是，问题是每 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;

Answer 1

默认情况下，Quart 将超时超过 60 秒的响应，对于服务器发送事件路由，超时应设置为

None

，即

response.timeout = None

。 查看文档