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
相关产品推荐
相关产品推荐

