2011-07-22 24 views
32

मैं खंडबद्ध प्रतिक्रिया उत्पन्न करने के लिए, प्ले फ्रेमवर्क का उपयोग कर रहा हूं। कोड है:समय में 'चुंक' प्रतिक्रिया प्राप्त करने और पार्स करने के लिए क्लाइंट साइड में जावास्क्रिप्ट कैसे लिखें?

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, जब सभी के बाद प्राप्त हुई ऊपर पॉप।

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

उत्तर

58

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 का उपयोग करें।

+2

ऐरेबफर का बेहतर उपयोग क्यों कर रहा है? – 4esn0k

+0

@ 4esn0k: उदाहरण के लिए यदि आप एक बाइनरी प्रोटोकॉल का उपयोग करने का निर्णय लेते हैं, जो एक अच्छा विचार है। एक और बात है कि यहाँ ब्राउज़र स्मृति में पूरे डेटा रखने के लिए नहीं है, और जहाँ तक मैं समझता हूँ, इसे प्राप्त करने के लिए आसान 'एक' स्ट्रिंग' साथ तुलना ArrayBuffer' साथ है। 'Slice' बेहतर काम करना चाहिए, क्योंकि यह UTF-8 स्ट्रिंग के साथ काम करने के रूप में' substring' नहीं होते, लेकिन सिर्फ सरणी अनुक्रमित उपयोग कर सकते हैं। –

+0

https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest#responseType – 4esn0k

0

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

+1

'onreadystatechanged' जाएगा केवल समय समाप्ति पर आग, गर्भपात और सफल अनुरोध किया। यह टुकड़ों पर आग नहीं लगेगा। –

+0

के। पता नहीं था कि – kishu27

+0

'onreadystatechange' प्रत्येक बार' तैयार की गई 'संपत्ति में परिवर्तन होता है। –

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(); 
     }); 
    } 
});