CODEWITHSUNDEEP
angular
Eyal L
Eyal L

Reputation: 63

How to process chunked HTTP Post response immediately on the client browser in angular 6/7

We have REST API client \ server service. In a specific post request, the server should start a long running operation and the client should wait and receive a progress notification until the operation is done. The progress notification is a simple json strings messages that should be visible to the user immediately when the server sends it.

The server sending a chunked JSON strings during the operation.

How should i react to received chunked data (from a post request) immediately when thy arrive? I'm using Angular 6, and i tried different techniques , with no successful results.

I have tried to set the httpClient option "reportProgress" to true, it just splits the response to different progress reports, but it still collects all the server chunks to single array buffer.

I have also tried creating an HttpInterceptor, i gotthe same "split" of the response, but not the actual server chunks.

Upvotes: 2

Views: 2964

Answers (2)

Eyal L
Eyal L

Reputation: 63

I figure it out: Using the XMLHttpRequest, register to the progress events and set the content type in the server node code to text/json. The progress events fired on each server chunk data.

Upvotes: 2

Pace
Pace

Reputation: 43867

I have tried to set the httpClient option "reportProgress" to true, it just splits the response to different progress reports, but it still collects all the server chunks to single array buffer.

That is builtin to the underlying XHR call (https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/responseType). Firefox has a custom response type (moz-chunked-arraybuffer) but there is no standard way of receiving a chunked response like that.

Browsers support file downloads which are not really accessible via JS but will be streaming. Otherwise, you need to load the entire contents into memory.

There are also solutions such as web sockets, server sent events, breaking the call into multiple short lived calls, etc. but those would all require changes on the server side.

Also relevant: https://github.com/angular/angular/issues/26289

Upvotes: 3

Related Questions