how to handle json stream issued by spring boot 2 in angular 5

13
votes

Spring boot 2 WebFlux generate Json stream in the new version

for example 

@GetMapping(value = "stream", produces = APPLICATION_STREAM_JSON_VALUE)
public Flux<Data> stream() {
    return Flux.interval(Duration.ofSeconds(1)).map(Data::new);
}

will produce issuing new data every one second

{"value":"1"}
{"value":"2"}
{"value":"3"}
{"value":"4"}
{"value":"5"}
{"value":"6"}

i have tried angular 5 httpclient 

findAll(): Observable<Data> {
   return this._http.get<Data>(this.url);
}

but it not work for me as i want to be reactive it not send me the result as it cache the result until the connection colsed

I want to ask what is the best way to handle this Json in angular 5

4
angularspring-bootjsonstream
Please read the "how to ask" : stackoverflow.com/help/how-to-ask. Can you tell us what you've already tried ? What would you like to improve in your current way of doing it ? - ibenjelloun
ok i am sorry i have update the question @ibenjelloun - ashraf revo
I think you should use WebSocket instead of HttpClient. Take a look at this tutorial : tutorialedge.net/typescript/angular/angular-websockets-tutorial - ibenjelloun

4 Answers

9
votes

As far as I know there is still no official solution (19.08.2018), however I have found some workaround. Each method of a HttpClient has config argument, where you can pass responseType and other things. I have mixed those settings like bellow:

{observe: 'events', responseType: 'text', reportProgress: true}

Then you will receive events with given types, in range 0 to 4. At least in my case type 3 was interesting content, which was in field partialText, but warning - in your case those messages (in partialText field) will look like bellow:

1 message:

{"value":"1"}

2 message:

{"value":"1"}
{"value":"2"}

3 message 

{"value":"1"}
{"value":"2"}
{"value":"3"}

etc... so, I have managed it like bellow:

method(url, /*if post - body,*/
      {observe: 'events', responseType: 'text', reportProgress: true})
      .pipe(
        filter(e => e.type === 3 && e.partialText),
        map(e => {
          const partials = e.partialText.trim().split('\n');
          return JSON.parse(partials.pop());
        })
      );
3
votes

With Server-Sent Events, it can be done like that:

import * as EventSource from 'eventsource';
...

const eventSource = new EventSource("http://www.example.com/stream");

eventSource.onmessage = (event) => {
  const data = JSON.parse(event['data']);
}
1
votes

A browser client has no way to consume a JSON stream (application/stream+json) other than using Server-Sent Events or WebSocket.

With requirements and technology you have described, WebSocket is a better fit.

0
votes

Something that I'm thinking, maybe you could keep the open connection (the get/fetch process) in a fire and forget task, and then in another async loop check if there is different content rather than the stored one to save and show it.

Maybe.