onUpdate 无法第一时间获取流式首帧响应

[senique]

重现步骤

``参考 https://ant-design-x.antgroup.com/components/use-x-chat-cn 流式输出，

重现代码如下：

import { UserOutlined } from '@ant-design/icons';
import { Bubble, Sender, useXAgent, useXChat, XRequest } from '@ant-design/x';
import { Flex, type GetProp } from 'antd';
import React from 'react';

const roles: GetProp<typeof Bubble.List, 'roles'> = {
  ai: {
    placement: 'start',
    avatar: { icon: <UserOutlined />, style: { background: '#fde3cf' } },
  },
  local: {
    placement: 'end',
    avatar: { icon: <UserOutlined />, style: { background: '#87d068' } },
  },
};

const App = () => {
  const [content, setContent] = React.useState('');

  const { create } = XRequest({
    model: '',
    baseURL: '',
  });
  
  // Agent for request
  const [agent] = useXAgent({
    request: async ({ message }, { onSuccess, onUpdate, onError }) => {
      let fullContent = '';

      try {
        create(
          {
            messages: [{ role: 'user', content: message }],
            stream: true,
          },
          {
            onUpdate: (chunk) => {
              // console.log('sse object', chunk);
              if (chunk.data !== '[DONE]') {
                const data = JSON.parse(chunk.data);
                fullContent += data?.choices[0].delta.content;
                onUpdate(fullContent);
              }
            },
            onSuccess: (chunks) => {
              // console.log('sse chunk list', chunks);
              onSuccess(fullContent);
            },
            onError: (error) => {
              // console.log('error', error);
              onError(error);
            },
          },
        );
      } catch (error) {
        onError(error);
      }
    },
  });

  // Chat messages
  const { onRequest, messages } = useXChat({
    agent,
  });

  return (
    <Flex vertical gap="middle">
      <Bubble.List
        roles={roles}
        style={{ maxHeight: 300 }}
        items={messages.map(({ id, message, status }) => ({
          key: id,
          role: status === 'local' ? 'local' : 'ai',
          content: message,
        }))}
      />
      <Sender
        loading={agent.isRequesting()}
        value={content}
        onChange={setContent}
        onSubmit={(nextContent) => {
          onRequest(nextContent);
          setContent('');
        }}
      />
    </Flex>
  );
};

export default App;

当前行为

XRequest + request/useXAgent + useXChat 响应如下（不满足预期效果，onUpdate 无法第一时间获取到首帧响应）：

预期行为

Python 直接流式调用（预期效果）：

上下文

Python 复现代码：

  url = f""
  data = {
    "model": model,
    "messages": messages,
    "stream": True
  }
  response = requests.post(url, headers=headers, json=data, stream=True)
  exec_time = time.time() - start_time
  print(f"首帧响应: 耗时[{getHMS(round(exec_time * 1000))}]")
  for line in response.iter_lines():
    if line:
      print(datetime.datetime.now().strftime('%H:%M:%S.%f')[:-3] + ' ' + line.decode('utf-8'))

版本

1.1.1

您在哪些浏览器上遇到了这个问题？

• Chrome Version 134.0.6998.165 (Official Build) (64-bit)
• Firefox 133.0 (64 位)

[jeekliang]

同样的问题

[senique]

• 参考 XStream 使用说明 测试以下两种方式都不能第一时间拿到首帧响应：

// 方式1. for await...of 语法进行流的异步迭代
  const [agent] = useXAgent({
    request: async (_, { onSuccess, onUpdate }) => {
      const response = await fetch();
 
      for await (const chunk of XStream({
        readableStream: response.body,
       })) {
        console.log(chunk);
      }
    }
  });

// 方式2. 
  const [agent] = useXAgent({
    request: async (_, { onSuccess, onUpdate }) => {
      const stream = XStream({
        readableStream: response.body,
      });
      const reader = stream.getReader();

      let current = '';
      while (reader) {
        const { value, done } = await reader.read();
        if (done) {
          onSuccess(current);
          break;
        }
        if (!value) continue;
        const data = JSON.parse(value.data);
        current += data.content || '';
        onUpdate(current);
      }
    },
  });

• 浏览器 F12 调试图

[bosenger]

我也遇到了相同的问题，有大神知道原因吗？

[kimteayon]

1.3.0版本看下呢

[kimteayon]

可以看看自己的accept-encoding 请求头相关逻辑，或者本地网络的拦截等

[dosubot]

你的问题是：在使用 XRequest + useXAgent + useXChat 进行流式输出时，onUpdate 回调无法第一时间拿到首帧响应，而 Python 直连流式接口时首帧响应非常快。

现有机制与文档说明

• 官方文档和源码示例显示，onUpdate 的设计初衷就是每收到一段流式数据就立即回调更新内容，理论上应该可以做到“首帧即回调”示例1 示例2。
• 你当前的实现方式与官方推荐一致，onUpdate 里每次收到 chunk 都会触发 UI 更新。

可能原因分析

1. 浏览器端 EventSource/Fetch 流式处理的延迟
   JavaScript 在浏览器端处理流式 SSE（Server-Sent Events）或 fetch/stream 时，首帧响应速度受底层实现、网络缓冲、SSE 解析等影响，通常比 Python 的 requests 更慢，尤其是 Chrome/Firefox 这类现代浏览器有自己的流控和缓冲策略。

2. XRequest 内部实现延迟
   如果 XRequest 内部对流式数据有缓冲或批量处理（比如等到收到一定数据量才触发 onUpdate），也会导致首帧响应慢于预期。官方文档未明确说明是否有此类缓冲，但从源码和 demo 看，onUpdate 应该是每 chunk 触发一次。

3. transformStream 配置
   useXChat 支持 transformStream 配置，可以自定义流式数据的处理方式。如果你需要更快拿到首帧，可以尝试自定义 transformStream，确保每次有数据就立刻处理和回调文档说明。

建议排查与优化方向

• 确认后端接口首帧响应速度：用 curl 或 Python 直接请求接口，确认后端确实能做到毫秒级首帧返回。
• 尝试自定义 transformStream：在 useXChat 里加上 transformStream，确保每次有数据就立刻处理和回调。
• 浏览器网络面板分析：用 Chrome DevTools 观察 EventStream 或 fetch 的网络帧，确认数据包到达时间与 JS 触发 onUpdate 的时间差异。
• 升级 ant-design-x 版本：你当前用的是 1.1.1，若有新版本可尝试升级，查看是否有相关优化。

参考官方流式 Demo

官方 demo 代码与您的实现方式一致，理论上应该可以做到流式首帧回调。如果你的表现明显慢于 Python，极大概率是浏览器端流式处理的机制差异或 XRequest 内部实现细节导致的官方流式 demo。

---

总结：
你的用法和官方推荐一致，onUpdate 理论上应该每收到一帧就回调。实际慢的原因大概率是浏览器流式处理机制或 XRequest 内部实现细节。建议重点排查 transformStream、自定义流处理、以及浏览器网络层的实际数据到达时间。如需进一步定位，建议提供更详细的网络抓包和首帧时间点对比。

如需 transformStream 示例或进一步排查建议，可补充说明。

To reply, just mention @dosu.

---

Docs are dead. Just use Dosu.

[TheAnswerIsNo]

1.3.0版本看下呢

这个可以提供具体代码示例吗，我目前也是出现流不是批次返回，是一次性返回所有

[senique]

1.3.0版本看下呢

这个可以提供具体代码示例吗，我目前也是出现流不是批次返回，是一次性返回所有

参考这个
#795