You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

AJAX xhr.onprogress消息在部分设备被缓冲,求排查解决方法

PHP实时进度消息在笔记本端被缓冲的排查求助

我编写了一段PHP脚本,用于输出进度文本消息,期望浏览器收到消息时实时显示。前端通过AJAX的xhr.onprogress事件接收消息,但我的几台笔记本上消息会被缓冲,直到最后一条发送完毕才统一显示;手机及其他用户的设备则能正常实时展示。我分别在本地Apache服务器和远程服务器测试,结果一致,且3款不同浏览器均出现该问题,已排除网络、防火墙、备份服务等因素,怀疑是设备设置导致。

HTML/Javascript代码

<!DOCTYPE html>
<html>
<head><link rel="shortcut icon" href="#"></head>
<style>
  .msg_area {
    overflow-y: scroll;
    height: 500px;
    width: 80%;
  }
</style>

<body>
<div>
  <label for="messages">Progress messages</label>
  <br>
  <div class="msg_area" id="messages"></div>
</div>

<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script>

  function debug(msg) {
    msg = msg.replace(/"/g, "");   // remove quotes
    msg = msg.replace(/\\n/g, "<br>");  // replace \n with html <br>
    $("#messages").append(msg);
  }

  function AJAXCall(the_url) {
    var n = 0;
    $.ajax({
      url: the_url, 
      async: true,
      beforeSend: function() {        
        //debug("BeforeSend:\n" + the_msg);
      },
      xhrFields: {
        onprogress: function(e) {
          // All the messages come through onprogress. and each text is the accumulated message over all sends.
          // We just want to print the new part so we keep track of the length of everything printed so far in variable n
          // The last message will be a stringified JSON object with 'success' as the first key
          var i;
          //  does this message contain the success object?
          if((i = e.target.responseText.indexOf("{\"success", n)) == -1) {
            // no success object, print it out
            debug("PROGRESS:  " + e.target.responseText.substr(n));
            n = e.target.responseText.length;
          } else {
            // found success object.  Print out up to that obejct and set n to the start of that string
            debug("PROGRESS:SUCCESS: " + e.target.responseText.substr(n, i-n));
            debug("=====================================\n");
            n = i;
          }
        }
      },
      error: function (request, status, error) {
        debug("ERROR:  "+ request.responseText);
      }
    });
  }

AJAXCall("http://localhost/test_ajax.php");

</script>
</body>
</html>

PHP代码

<?php
header('Content-type: text/html; charset=utf-8');

for($i=0; $i<3; $i++) {
  msg("Message $i\n");
  sleep(3);
}
echo json_encode(array("success" => true, "text" => "end test_ajax.php"));

function msg($text) {
  global $first_msg;

  echo json_encode($text);
  flush();
  ob_flush();
}

?>

预期正确结果(手机及其他用户设备)

PROGRESS: Message 0
PROGRESS: Message 1
PROGRESS:SUCCESS: Message 2
=====================================

异常缓冲结果(我的笔记本)

PROGRESS:SUCCESS: Message 0 
Message 1 
Message 2
=====================================

恳请提供排查思路。

内容的提问来源于stack exchange,提问作者webcoyote

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.08 05:07:36