How to send data over a http stream asynchronously from backend?

Question

I am recently learning rxjs. I am trying to obtain data over a http stream (Asynchronously, without closing the stream after a single response is received. I want multiple response from a single http request over time). So the UI code for rxjs would be something like this,

this.http.get('https://...').subscribe(value => {
     ...
    });

However i dont know how to send data asynchronously through http response from backend. The http response waits for the entire json to be completed and it ends up sending the entire data in a single response. I don't want that. How to code the backend to send a json data as soon as it is available instead of waiting for all data to be obtained and sending as [{..},{..},{..}....]?

You probably need a webSocket. Check https://rxjs-dev.firebaseapp.com/api/webSocket/webSocket — callback, Dec 04 '19 at 17:38
Well, rxjs calls are asynchronous by nature and one Http request results in one single Http response. Your question seems surprising. You can use websockets or split your request into several ones — C.Champagne, Dec 04 '19 at 17:42
The real trick is parsing a stream of JSON since technically without the end `]`, it's not valid JSON... — Heretic Monkey, Dec 04 '19 at 17:48

Adrian Brand · Accepted Answer · 2019-12-04T22:19:13.107

Have a response object with a flag to indicate if there is more data.

interface Response {
  payload: Payload,
  complete: boolean
}

Then your service can make a request to the server which sends a response as soon as it has some data with complete false, your service keeps pooling the server until the server responds with complete true.

const { of } = rxjs;
const { switchMap, map } = rxjs.operators;

let i = 0;

const http = url => of({ payload: [i++], complete: i === 5 ? true : false });

const poll = () => http('url').pipe(
  switchMap(response => response.complete ? of(response) : poll().pipe(
    map(res => ({ payload: [...response.payload, ...res.payload], complete: res.complete }))
  ))
);

poll().subscribe(response => { console.log(response); });

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.5.3/rxjs.umd.min.js"></script>

How to send data over a http stream asynchronously from backend?

1 Answers1