समय में 'चुंक' प्रतिक्रिया प्राप्त करने और पार्स करने के लिए क्लाइंट साइड में जावास्क्रिप्ट कैसे लिखें?

Question

मैं खंडबद्ध प्रतिक्रिया उत्पन्न करने के लिए, प्ले फ्रेमवर्क का उपयोग कर रहा हूं। कोड है:

class Test extends Controller { 
    public static void chunk() throws InterruptedException { 
     for (int i = 0; i < 10; i++) { 
      String data = repeat("" + i, 1000); 
      response.writeChunk(data); 
      Thread.sleep(1000); 
     } 
    } 
} 

जब मैं ब्राउज़र का उपयोग दौरा करने के लिए http://localhost:9000/test/chunk, मैं देख सकता डेटा हर दूसरे वृद्धि हुई प्रदर्शन किया। लेकिन, जब मैं डेटा प्राप्त करने और संभालने के लिए जावास्क्रिप्ट फ़ंक्शन लिखता हूं, तो पाया जाता है कि यह सभी डेटा प्राप्त होने तक अवरुद्ध हो जाएगा।

कोड है:

$(function(){ 
    $.ajax(
     "/test/chunked", 
     { 
      "success": function(data, textStatus, xhr) { 
       alert(textStatus); 
      } 
     } 
    ); 
}); 

मैं देख सकता हूँ एक संदेश बॉक्स 10s, जब सभी के बाद प्राप्त हुई ऊपर पॉप।

समय को डेटा कैसे प्राप्त करें और डेटा को कैसे संभालें?

Answer 1

jQuery कि समर्थन नहीं करता है, लेकिन आप उस सादे एक्सएचआर के साथ क्या कर सकते हैं:

var xhr = new XMLHttpRequest() 
xhr.open("GET", "/test/chunked", true) 
xhr.onprogress = function() { 
    console.log("PROGRESS:", xhr.responseText) 
} 
xhr.send() 

यह all modern browsers में काम करता है, IE 10 W3C विनिर्देश here भी शामिल है।

नकारात्मकता यह है कि xhr.responseText में एक संचित प्रतिक्रिया है। आप उस पर सबस्ट्रिंग का उपयोग कर सकते हैं, लेकिन responseType विशेषता का उपयोग करने का एक बेहतर विचार है और पर slice का उपयोग करें।

Answer 2

success घटना पूरी हो जाएगी जब पूरा डेटा ट्रांसमिशन किया जाएगा और कनेक्शन 200 प्रतिक्रिया कोड के साथ बंद हो जाएगा। मेरा मानना ​​है कि आप मूल onreadystatechanged ईवेंट को कार्यान्वित करने में सक्षम होना चाहिए और डेटा पैकेट को आने के रूप में देखते हैं।

Answer 3

जल्द ही हम ReadableStream एपीआई (MDN docs here) का उपयोग करने में सक्षम होना चाहिए। नीचे दिए गए कोड क्रोम संस्करण 62.0.3202.94 साथ काम कर रहा है:

fetch(url).then(function (response) { 
    let reader = response.body.getReader(); 
    let decoder = new TextDecoder(); 
    return readData(); 
    function readData() { 
     return reader.read().then(function ({value, done}) { 
      let newData = decoder.decode(value, {stream: !done}); 
      console.log(newData); 
      if (done) { 
       console.log('Stream complete'); 
       return; 
      } 
      return readData(); 
     }); 
    } 
});