Endless HTTP Stream Observable not emitting anything but data transferred

问题

I've been digging an issue with Angular 4 and RxJS. Here is my code, the issue is, the http.post request Observable is not emitting anything to the next of the chain, the map(). The POST just get an endless response, it's a stream of Motion JPEG data. Now I have to deal with the data, say each 500KB transferred. My problem is that I cannot do anything with the data if the Observable not emitting anything.

So how to make such angular HTTP feature emit to the next of the chain each chunk of data transferred?

postActionGivenDataBinaryResponse(url:string, data:string) : Observable<any>{
    let headers = new Headers ({
        'Content-Type' : 'application/json;charset=utf-8'
    }) ;
    let options = new RequestOptions({
        headers : headers,
        responseType: ResponseContentType.ArrayBuffer
    }) ;

    //return binary data as is no json
    return this.http.post(url, data, options) //suspecting here is not emitting anything due to unknown configuration issue.
                    .map(this.extractBinaryData)
                    .catch(this.handleError) ;
}

private extractBinaryData(res:Response){
    console.log('Dealing with data in the com service.') ; // this never runs
    return res ;
}

I call the above function like this, the post response is an endless binary data, I need to process it as string array.

this.mySubscription = this.comService.postActionGivenDataBinaryResponse(myurl,mydata)
  .do(()=>{
              console.log('Observable Passed data.') ; //this never runs.
          })
  .bufferCount(128000)
  .map((data)=>{//process the data each 128kb chunk})
  .subscribe();

回答1:

I am assuming you are seeing the response sent from the server on the network tab but its got getting out from the map operator. I am just guessing the problem could be in how you have used the function extractBinaryData() inside the map. Instead, could you just not use the function and just do a .map(res => res) or remove that.. I am assuming the "this" reference inside the map is not the object that holds the extractBinaryData() method. Please try this and let us know if it solved the issue.

回答2:

I solved this issue by a trick that MDN provided. It's about how to transfer binary data

So I wrote my own request instead of using Angular's HTTP module.

And utilizing the responseText trick to keep the request never ending.

The request is like,

function load_binary_resource(url) {
  var req = new XMLHttpRequest();
  req.open('GET', url, false);
  //XHR binary charset opt by Marcus Granado 2006 [http://mgran.blogspot.com]
  req.overrideMimeType('text\/plain; charset=x-user-defined');
  req.send(null);
  if (req.status != 200) return '';
  return req.responseText;
}

I just need to wrap this into an observable, then data would keep streaming and never stop unless the request is abort().

来源：https://stackoverflow.com/questions/44094345/endless-http-stream-observable-not-emitting-anything-but-data-transferred

标签

angular

rxjs

observable