1

I'm exposing an end-point using Spring Boot and Webflux that returns an infinite stream of numbers, one every one second:

@GetMapping(value = "/infinitestreamflux", produces = MediaType.APPLICATION_STREAM_JSON_VALUE)
@CrossOrigin(origins = "http://localhost:4200")
public Flux<Long> returnInfiniteStreamFlux() {
    return Flux.interval(Duration.ofSeconds(1))
            .log();
}

If I call localhost:8080/infinitestreamflux from my browser, everything works fine. The results are correctly shown as they arrive.

I'd like to archieve the same result using Angular 8, but nothing is shown in the page.

This is my test component:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  infiniteStreamFlux;

  constructor(private http: HttpClient) {}

  ngOnInit(): void {
    this.http.get('http://localhost:8080/infinitestreamflux')
      .subscribe(data => this.infiniteStreamFlux = data);
  }

}

This is my very simple template:

{{infiniteStreamFlux}}

From my server log, I can clearly see that the results are being sent. and from the Chrome Dev Tools I found out that values arrive each second, even tho they're not shown in the preview tab. In the end, the page ends up being empty.

How can I solve the issue?

Capitano Giovarco
  • 157
  • 1
  • 11
  • not sure(especially about what type of connection it is), but it seems it should be something related to WebSockets. A browser's GET request *gets* response and closes the connection. Try looking in that direction – andriishupta Feb 06 '20 at 21:59
  • What do you mean with "type of connection"? They are both hosted on localhost. I think that Angular is waiting for the stream to finish to gather the data and expose it in the page. But since the stream in infinite, then the data is never shown. – Capitano Giovarco Feb 07 '20 at 08:13
  • angular doesn't matter - request is made by HTTP(GET) - it opens connections, getting a response, closes the connection. to communicate as you want - you need to set up a TCP connection with WebSockets or use something like a "long polling" technic. HTTP doesn't work with infinite streams – andriishupta Feb 07 '20 at 09:35
  • Do you mean that Observables do not work with infinite streams? I mean, my understanding was that one can attach a callback to handle each value it receives from the stream. Isn't it the whole point of RxJS? And even tho infinite streams don't work, I tried with a finite stream and it doesn't work anyway. Thanks for the support! – Capitano Giovarco Feb 07 '20 at 14:42
  • emphasize again: it is not angular/neither rxjs - you need to understand the difference with HTTP vs WebSockets(single request-response vs long-lived connection with messaging) and then do what and how you need. and yes - rxjs can do whatever you are telling it to do, but you need to understand what you need. gl :) – andriishupta Feb 08 '20 at 14:46
  • Oki doki, thanks for the patience :) – Capitano Giovarco Feb 17 '20 at 12:56

0 Answers0